Chips and Tags
Chips are minimalistic elements that reflect statuses or a user’s input. For example, they allow users to enter data to filter content. Tags represent a label or categorization for elements like articles and help to filter content. This guide explains how to use them.
-
Usage
-
Examples
-
Related Components
-
Download
Usage
Chips
Chips appear in form fields – mainly in search bars – and are used as an indicator for filtered content. They reflect the input a user types in. Chips can be manipulated by editing the text or deleted by clicking on the x.
Tags
Tags are used as plain text within a rounded box and can be interactive if needed. They can have two different states: default and disabled. When they are disabled, they can not be clicked.
Chip layouts
Chips can have various designs. You can add icons to the left or right of the text. Chips can be used as toggles and they can have multiple lines if the content is bigger. You can also add images in front of the text.
Examples
