Skip to content

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).

Primary
Secondary
Tertiary
Error

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.

Primary
Secondary
Tertiary
Error

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.

Primary
Secondary
Tertiary
Error

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.

Primary
Primary
Primary
Secondary
secondary
Error
Error

Not really.