Docs Components
Badge & StatusBadgeexperimental
A small stamp that shows the status of something at a glance. Its color always comes from the product-wide status map — active is green, scheduled is blue, drafts are quiet, warnings are ochre, failures are red. Never pick a badge color by hand: pass the status, and the map decides.
Variants
tone enumClassification color. For lifecycle statuses the tone is derived by StatusBadge, never chosen.
neutral— Sunken wash + muted text: draft, ended, archived, tier labels.success— Moss trio: active, live, published.info— Indigo trio: scheduled.caution— Ochre trio: override, pending, environment badges (Stage).danger— Hanko trio: failing, error.
The status map
active/live/published → success · scheduled → info · draft/ended/archived → neutral · override/pending → caution · failing/error → danger. The map lives in code as STATUS_TONE and here — change both together or not at all.
API
| Prop | Type | Description |
|---|---|---|
tone | string | Badge only. Free-form classification color. |
status required | string | StatusBadge only. Tone and label both derive from this — callers cannot pick colors. |
Design specifications
- height
space-5 - padding-x
space-2 - radius
radius-full - font
type-label (uppercase, tracking welded) - border
border-width-hairline - colors
color-status-{tone}-wash / -edge / -text - on-media
wash composited over opaque color-bg-raised (.badge.on-media; automatic inside .entity-card-thumb)
Guidelines
- mustLifecycle statuses MUST render through StatusBadge, never through Badge with a hand-picked tone.
- mustStatus is always accompanied by its text label; the wash alone never carries meaning.
- shouldDo not use the caution tone for brand/tier labels that are not warnings.
- mustA badge over imagery MUST use the on-media backplate — translucent washes composite unpredictably over artwork and void the contrast contracts.