Compact pills for attributes, filters, and inline metadata
Chips label, filter, or represent small pieces of information. Unlike a Badge, which communicates status through colour, a chip is neutral by default and can be interactive: pass a click handler to make it a button, a selected state for filtering, or a remove handler for input-style chips.
Sizes
Large takes the default button’s box and the body text scale. Reach for it when the pill is a primary tap target, the way a prompt suggestion is, rather than metadata about something else.
With icons
Clickable: filter chips
With an onClick handler the chip renders as a real <button>. Add selected for a filter-style toggle: the teal active fill follows the same convention as the segmented control.
Removable: input chips
An onRemove handler adds a trailing close button with its own accessible label.
Non-interactive and disabled
Without handlers a chip is a plain <span>: a quiet label for metadata, like the run stages on the Loops page. Disabled chips drop to 40% opacity, matching every other control in the system.