Components
Chip
Short user content, and a filter chip whose active state is a real state.
Anika SharmaMarco ReyesPriya Nair
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/chip.jsonChip is not Tag
A Tag is a status the system assigns. A Chip is content a person put there — a recipient, a typed token, a suggested reply. The shape differs (radius/md against a full pill) so the two do not blur together in a row that contains both.
Active has to look active
FilterChip at rest is bg/canvas with a subtle border; active is bg/selected
with border/active. A filter that looks identical whether or not it is
filtering is how people lose rows without noticing — the same defect that made
"All" and a real selection indistinguishable on the exchange table.
When active and a value is supplied, the chip shows the value rather than the
label, so the current filter is readable without opening it.
| Prop | Type | Default | Description |
|---|---|---|---|
| onRemove | () => void | — | Chip. Adds the × affordance. |
| label / value | string | — | FilterChip. Value replaces the label once active. |
| active | boolean | false | FilterChip. Sets aria-pressed. |