Skip to content
search icon
clear
Component Status

Chips, also known as tags or badges, are advanced badges that represent discrete information.

Guidelines

Chips allow users to make selections, perform an action, input information and attributes, filter content and complete tasks. Chips can transform from free text or predefined text.

Don't

  • Do not use chips as call-to-action buttons.

Variations

Badge chips

Badge chips contain numeric values and show a running tally. Only use the Selected (which has a role of "Selected or active") Text chip for badge chips. The colours are allowed to be changed from the default colour provided, however, it is up to the designer to ensure that the colours chosen are accessible.

Tag chips

Tags are used for items that need to be labeled, categorised, or organised using keywords that describe them. Use the Selected (which has a role of "Selected or active") Text chip for tag chips. The colours are allowed to be changed from the default colour provided, however, it is up to the designer to ensure that the colours chosen are accessible.

Choice chips

When there are at least two predefined options to choose between, choice chips can be used to signify the user's choice. A single selection can be made. Unselected predefined choices should use the Enabled Text chip and selected chips switch to the Selected Text chip. Selecting a choice chip automatically deselects all other chips in the set.

Filter chips

Multiple predefined keywords can be listed for the user to choose from. Multiple chips can be selected or unselected. Unselected predefined chips should used the Enabled Text or the Enabled Icon + text + close chip, and selected chips switch to the Selected Icon + text, The icon helps indicate that the chip is selected, consider using System icons > UI action > Done.

Input chips

Input chips are used as tags to represent complex information---such as a person, place or thing. Input chips are not predefined but defined by the user allowing the user to create and edit multiple chips. When pressed, input chips transform into editable text. When the editable text is no longer in focus, it transforms back into a chip. Input chips are removable, meaning the user can delete the input. Both the Avatar + text + close chip and the Icon + text + close chip can be used as input chips. If a text input is not recognised or validated, it can switch to the Error state.

Action chips

When there are at least two predefined options to choose between, action chips trigger actions related to the primary content. Action chips are not removable but can appear dynamically. Use the Icon + text chip. Action chips can show progress. While the action is being processed, replace the icon with the Progress indicator > Circular.

Examples

Text

FigmaExternal linkChip with text

Icon + text

FigmaExternal linkChip with icon and text

Avatar + text + remove

FigmaExternal linkChip with avatar, text and remove

Icon + text + remove

FigmaExternal linkChip with icon, text and remove

Demo

Text

normal
active
active + deletableclose
error
error + deletableclose
error + deletable + clickableclose
clickable
deletableclose
deletable + clickableclose
disabledclose

Text + Icon

normal
active
active + deletableclose
error
error + deletableclose
error + deletable + clickableclose
clickable
deletableclose
deletable + clickableclose
disabledclose

Text + Avatar

cat
normal
cat
active
cat
active + deletableclose
cat
error
cat
error + deletableclose
cat
error + deletable + clickableclose
cat
clickable
cat
deletableclose
cat
deletable + clickableclose
cat
disabledclose
✏️ Edit this page on GitHub