Chips
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
Icon + text
Avatar + text + remove
Icon + text + remove
