Chips
Tonal
Tonal chips is an alternative middle ground between filled and outline chips. Useful in context where lower priority chip requires extra emphasis.
Use variant="tonal"
to create a tonal chip (also the default if you omit variant).
Outlined
Outlined chips are least-emphasis chips, containing actions that are important but aren't the primary action. It can be placed on a variety of backgrounds, however not recommended on top of images.
Use variant="outlined"
to create outlined chip.
Sizes
All chips uses a very low specificity selector for font-size and em:s for sizing. Thus the size can be easily overridden by just assigning a different font-size.
Adding icons
Icons can visually communicate a chips's action and help draw attention. It's optional and can be added by using icon
or append-icon
prop to render icons in the chip.