Filter Chip
The chips in a filter bar: unset, applied, and the affordance for adding another.
Put the value in the label
An active chip reading just "Status" tells you a filter is on but not what it's filtering to. "Status: Active" means the bar can be read at a glance without opening anything.
A whole filter bar
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | 'default' | 'active' | 'add' | 'default' | Default is an unset filter, active is one with a value (and an ×), add is the dashed affordance for adding another. |
| children | ReactNode | Chip label. For an active chip, include the value: "Status: Active", not just "Status". | |
| onClick | () => void | Fires when the chip body is clicked, for opening its menu or the filter picker. | |
| onRemove | () => void | Fires when the × on an active chip is clicked. |