Use chips to represent options in a specific context. They are unlike buttons, which are persistent across contexts.
A chip labels or draws attention to categorised content. Chips can be interactive and help users navigate to relevant content easily.
When displaying multiple chips together, place them in a row.
- Include keywords.
- Use on any content page.
- Link through to the topic page.
- Don’t include punctuation.
- Don’t use as a heading.
- Don’t include more than 4 words.
- Don’t use without an interaction or link.
While chips and buttons both prompt calls to action, they are different.
Multiple chips should all sit together. Buttons should sit separately from each other.
Chips react to their context, but buttons are fixed and remain static.
Chips convey forking paths in a user experience, while buttons show a linear step.
The chip has a default and reverse variant, allowing flexible use across a range of backgrounds.
Use the reverse variant when the chip appears on the primary colour.
The chip uses the primary and primary-accessible colour tokens. This is to meet colour contrast requirements when theming.
If the site primary colour is ‘light’, the chip content will display in the type-default colour. The border will always take on the site primary colour.