Chips

Key Points

• Chips are compact elements that allow users to select a choice, filter content, or trigger an action
• Chips should only be used in the context of filtering data
• There are two chip variants; one with a icon and the other with a nested badge for further information
• The whole chip or element is tappable
• The add item and clear clear all controls is optional, it may not be required based on the filter

Usage

There are additional control buttons that allow a chip item to be added or a "clear all" to reset the filter.

 

Chips should be used in a collection, the controls are optional as the filter behaviour may handle the addition and removal. When controls are used:

• Add Items should always be first in the collection
• Clear all should always be at the end of the collection

Collections of chips will run over multiple lines if the containing space is narrower than the collection.

Chips + Icons

This chip type is ideally suited when a chip needs to be correlated with an icon. Note, that these chips use icons from the 16px icon suite. If you require new icons to be added you should follow the icon creation guidelines.

Chips + Badges

In instances where the chip needs to contain more contextual information such as a count or other label you can use this type of chip. The badge in these chips is specific to the component and does not contain the variants of a standard badge.

File Links