Chips

Status

Component checklist

Key points

• Chips only exist in the web component library at present
• Chips are compact elements that allow users to select, filter content, or remove applied filters
• Chips should only be used in the context of filtering data
• There are two chip variants: one with an icon and another with a badge for additional information
• Each chip has two interaction areas: one to select the chip and another to remove it
• Collections can include optional "Add items" and "Clear all" controls, depending on filter behaviour
• Collections can consist of a "Clear all" control when there are more than two chips in a collection
• Collections wrap to multiple lines if the containing space is narrower than the collection width

Use chips to display and manage active filters within a page. Chips help users understand which filters are currently applied and provide a quick way to remove them.

File Links