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
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.