Display
Badge & Chip
Badge labels a status; Chip is its interactive sibling for filters and selections.
Badge Chip
import { Badge, Chip } from '@anomalia/ui'; Notes
- If it can be tapped, it is a Chip. Badges are deliberately not interactive.
- Chip fires a haptic tick on selection and shrinks under the finger.
Examples
Badges
Badges label a status and are deliberately not interactive. Tone drives colour; variant drives how loud it is.
Neutral Accent Published Pending Failed Draft
Solid Outline 3
Chips
Chips are the interactive sibling: tap to toggle, with a ripple, a squish and a haptic tick. Removable chips get a trailing ✕.
API
Badge
| Prop | Type | Default | Description |
|---|---|---|---|
tone | 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | Status colour. |
variant | 'solid' | 'soft' | 'outline' | 'soft' | Fill treatment. |
dot | boolean | false | Leading status dot. |
Chip
| Prop | Type | Default | Description |
|---|---|---|---|
selected | boolean | false | Selected (accent) state. |
onremove | () => void | — | Adds a trailing ✕. |
leading | Snippet | — | Icon or avatar before the label. |
Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.