Types
There are three types of chips with their own specific uses and behaviours:
Selectable chip
A selectable chip simply let the user choose an option. This has an ‘on’ or ‘off’ state.
Dropdown chip
A dropdown chip open an interface to show value(s) or to make further selections.
Dismissible chip
A dismissable chip displays a choice inputted by the user. The user can choose to remove the filter if they wish.
Styles
There are three styles of chips with each having a corresponding surface.
Default
This works in most situations. The chip has no fill, so this works with Surface-Default, and Canvas-Default + Canvas-Contrast options.
On dark
This is a reversed style that works with Surface-Contrast.
On image
This style is to be used over complex surfaces like maps or images.
Anatomy
Leading icon
An optional leading icon can be used if it adds a visual description of the copy on the label.
Trailing accessory
There are only two trailing icons we support and each is specific to a chip type.
- Dropdown chip uses a chevron icon.
- Dismissible chip uses a close icon.
States (selectable and dropdown)
Off
This is the resting state of the chip.
Hover
This indicates that interaction is available for people using pointer devices.
On
This is the active or chosen state of the chip.
Disabled
The disabled state indicates that an action can’t be taken until a previous action is completed.
States (dismissible)
Dismissible chips differ in that they have no off-state. The chip is removed, and the screen is refreshed when dismissed.
