Chip
Chip
Component variants
Interactive example
There are two types of chip: dismissible chips and static chips. Dismissible chips have both filled and outline variants and are interactive, whereas static chips simply present information and aren't actionable.
Dismissible chips
Use a dismissible chip to show selected data from a user action that can be cleared by dismissing the chip. This is often used in the context of filtering and selection.
Filled
Use filled dismissible chips to provide high emphasis on the displayed information.
Outlined
Use outlined dismissible chips to provide low emphasis on the displayed information.
Static chips
Use static chips to display information that does not need clearing. They aren't interactive, so they don't present any action and they can't be dismissed.
When to use
Dismissible chips
Use dismissible chips when you need to choose multiple items from a list but need to show items after they've been chosen.
Common use cases include:
-
A list showing which filters have been selected for a search.
-
Choosing multiple recipients of a message.
Static chips
Use static chips when you need to simply display a piece of information with no interaction, such as a label.
Common use cases include:
-
Labelling or drawing attention to a particular card or row because of its state.
-
Displaying the current location of an item.
When not to use
Dismissible chips
Don't use dismissible chips where the user can't re-select the item presented in the chip.
For example, if used to show a selected filter, after dismissing the chip and clearing the filter, it can be applied again later.
Don't use dismissible chips when the user will not be able to re-select the dismissed item.
Allow users to re-select the item after it has been dismissed.
Static chips
Don't use static chips to show status. Use
Layout and placement
Chip grouping
When using chips in a group, make sure they are left aligned and are positioned next to each other in a row.
Only position chips on multiple rows if there isn't enough horizontal space to show them on one, or if they are segmented into labelled groups.
Content
Labels
Use concise labels for better readability. Longer labels will force the text to wrap.
Icons
Use an icon on the left of a dismissible or static chip to provide additional meaning.
When including an icon in a chip make sure that the icon is understandable and relevant to the information presented.
Always provide alternative descriptions for icons, or mark them as decorative. Don't use icons if they aren't necessary.