Badge
Compact labels for status, categories, and counts with multiple visual styles.
01 Examples
Counter (numeric pill)
Border (visual separation on colored surfaces)
Notification Counter
02 Patterns
Badge serves five distinct use cases that look alike but behave differently. Picking the right
pattern up-front avoids API-shape regret later — particularly around removable vs interactive,
counter sizing, and placement-anchoring. A future purpose axis (tag / counter / dot / chip) will
make this taxonomy first-class; until then, the five patterns below are the canonical reference.
1. Status Tag — stateful label
2. Counter — numeric pill
3. Indicator Dot — presence/state marker
4. Filter Chip — removable, user-applied
5. Inline Label — categorization in prose
The Beta release adds support for OKLCH color tokens and a redesigned Tier API . Existing consumers can opt-in per component.
When to pick which
| Pattern | Key Prop | Recommended Variant |
|---|---|---|
| Status Tag | variant | soft or outlined |
| Counter | counter · placement | filled |
| Indicator Dot | variant="dot" · border | dot (locked) |
| Filter Chip | removable · onRemove | soft |
| Inline Label | — | outlined or soft |
Mixing patterns (e.g. counter + removable, or filter-chip with `intent=danger`) usually
points at a different component — a deletable counter is a Chip, a danger-tinted filter is a state-tag of the search itself.
03 Customization
Gradient Tags
Glassmorphism
Neon Glow
Fully Custom (unstyled)
04 Accessibility
Built-in ARIA
Badges render with role="status" by default,
announcing content changes to screen readers. Removable badges include an accessible label
for the remove button. Set role="alert" for time-sensitive
notifications.
Keyboard
Interactive badges are focusable via Tab and activate with Enter / Space. Removable badges also respond to Delete / Backspace.
Reduced Motion
Pulse animations and Mint effects are suppressed when prefers-reduced-motion is enabled.
04 API Reference
No matching properties |