StatusBadge
<StatusBadge> wraps Badge with a fixed map: pass a status name, get the right variant + label. Use this 90% of the time when you’d reach for a Badge — it standardizes the system across screens.
When to use
- Showing the status of an entity that has a state machine (Agent, Curriculum, Skill, …).
- Anywhere consistency across pages matters more than the visual being tunable per surface.
Don’t use StatusBadge for: arbitrary tags (use Badge directly), counts, or category labels.
Defaults
<StatusBadge status="DRAFT" /><StatusBadge status="ACTIVE" /><StatusBadge status="PUBLISHED" /><StatusBadge status="DEPRECATED" /><StatusBadge status="ARCHIVED" />| Status | Variant | Label |
|---|---|---|
DRAFT | outline | Draft |
ACTIVE | default | Active |
PUBLISHED | default | Published |
DEPRECATED | secondary | Deprecated |
ARCHIVED | destructive | Archived |
COMPETITION, CERTIFICATION | secondary | as-is |
SKILL | outline | Skill |
CURRICULUM | default | Curriculum |
Unknown status
Statuses not in the map fall back to outline variant with the raw string as the label. If you find yourself relying on this, the map should grow — open a PR to update StatusBadge.tsx.
API
| Prop | Type | Default | Description |
|---|---|---|---|
status * | string | — | Status enum value (DRAFT, ACTIVE, …) or any string. Unknown values fall back to outline variant. |
Design guidelines
✓ Do
- Use the canonical status enum from the API. Pass it as-is — capitalization and all.
- When introducing a new status, update the map in StatusBadge.tsx so every screen shows it consistently.
✗ Don't
- Hard-code <Badge variant="…">Active</Badge> — that's why this primitive exists.
- Translate the label inline. Localization happens in the map (or via a future i18n hook), not at the call site.
Accessibility
- Inherits from
Badge. - The label text carries the meaning — color is the secondary signal.
Related
Badge— For tags, counts, and arbitrary labels.