Chips are designed for user input and offer a limited set of interactions. For any other action, use a button.

Types

There are three types of chips with their own specific uses and behaviours:

Selectable chip

These chips let the user select an option. This has an ‘on’ or ‘off’ state.

These chips open an interface to choose a value or make further selections.

Dismissible chip

These chips display a choice that the user can interact with to remove.

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.

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.

Chip