components
Chip
A selectable, optionally removable tag. Selected chips fill with the tone; unselected chips are outlined. Follows the toggle-to-clear filter pattern: tapping the active chip again clears it. Touch-first, md is a 44px target.
Filter row
Single-select. Tap to filter; tap the active chip again to clear. No standalone All control.
Removable
Provide onRemove to show a remove affordance.
Sizes
sm
md
lg
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | Tone | neutral | Semantic intent of the selected fill. |
| selected | boolean | false | Toggle state. Sets aria-pressed. |
| size | ControlSize | md | sm 36px, md 44px, lg 56px. |
| leadingIcon | ReactNode | none | Optional leading icon. |
| onRemove | () => void | none | When set, renders a remove button. |