Skip to content

Chip

Back to What's New

The Chip is now part of CDS — a compact, interactive button that represents a selectable option such as a filter or category. Chips are toggleable on and off by the user, and are most often used in groups: filter rows, tag pickers, quick-selection lists.

Reach for a Chip when users can apply or remove filters within a search or listing experience, when a group of options allows multiple selections (fuel type, body style, available colours), when active selections need to be displayed individually and dismissed one by one, or when the interaction is user-initiated and the element needs to communicate a selected or unselected state. Skip it for read-only metadata or system-assigned status (use a Label instead), for one-shot actions (use a Button), and for purely decorative elements.

This release ships the visual styles only — Label (required), optional leading check icon, optional trailing close icon; four size variants; default and on-image type variants with contrast on/off; and the full set of states (rested, hover, focused, disabled). Selection and removal interactivity is wired up by the consuming component. Both icons inside a chip carry aria-hidden="true"; the label text conveys the meaning on its own.

Full anatomy, schemes, and accessibility guidance live on the Chip documentation page.