Components
Badges and status labels
Show compact categorical context without turning every state into an action.
On this page
Purpose and composition
Show compact categorical context without turning every state into an action.
Use with explicit explanatory text where a badge alone cannot explain readiness.
Anatomy
| Part | Responsibility |
|---|---|
| Pill | Minimum 28px line box and rounded-full shape |
| Label | Explicit status or relationship name |
Configuration and variants
| Input / variant | Contract |
|---|---|
| tone | neutral / primary / amber / green / red / blue; neutral default |
| children | Readable status text |
| className | Source uses size overrides for compact counts |
States and feedback
| State | Visible / behavioral result |
|---|---|
| Neutral | Unassigned or supporting category |
| Primary | Owner or selected supporting context |
| Amber | Waiting or invited |
| Green | Customer, active, delivered |
| Red | Failed or blocked |
| Blue | Prospect or sent |
Interaction and responsive behavior
- Badge is a span, not a button.
- Allow groups to wrap; avoid squeezing labels.
- Keep identity dots separate from status meanings.
Accessibility contract
- Never rely only on tone.
- Status changes need an announcement strategy outside this passive span.
Known implementation limits
Dark badge backgrounds use translucent color utilities; contrast depends on the parent surface and must be measured there.
Composition example
<Badge tone="amber">Waiting</Badge>Source references
| File | Responsibility |
|---|---|
| components/ui/primitives.tsx | Badge |
Examples from the app
Actual Sonarist components with fictional conversations, people, example.com addresses and simulated operational states. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-08 · Revision 10f45d1377b5 · Documentation v1.0.0