display contract
Chip
Compact selectable item used in filter rows and contact pickers.
Variants
- filter
- Toggleable — pressed state shows the active filter
- input
- Selected entity in a multi-input — has a remove button
- choice
- Single-select within a Chip group (radio semantics)
Sizes
- sm
- 24pt
- md
- 32pt
Slots
- leading
- Optional avatar / icon
- trailing
- Optional remove button
Example
<Chip variant="filter" pressed={active} onClick={toggle}>Last 7 days</Chip>Usage rule
Filter chips use aria-pressed; choice chips use role="radio".
The full Chip contract has 2 more rules, plus the do-not patterns. Get the full recipe.