## Status badge
A glanceable lifecycle pill for a domain object — draft, published, closed, archived, active, inactive.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-status-badge> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: dashboard, editor, settings.
Props:
- status: draft | published | closed | archived | active | inactive, default draft. The lifecycle state — drives the pill and dot colour via a CSS-only persistent node
Tokens: gray-20, gray-25, gray-60, gray-70, text-secondary, text-tertiary, text-positive, text-warning, bg-positive, bg-warning, color-success, color-warning, radius-pill.
Use when: Status badge (reflecting a value from a known status enum (a survey/presentation/collector's lifecycle state)); Tag (a free-form label, keyword or category chip); Badge (a count or a bare notification dot).