# Status badge
> Generated from status-badge.contract.json — do not edit by hand.

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.

Surfaces: dashboard, editor, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `status` | draft | published | closed | archived | active | inactive | `draft` | The lifecycle state — drives the pill and dot colour via a CSS-only persistent node |

## Visual standard (measured)
- Shape: height 22 · radius pill · dot 6 + label
- Draft: neutral #F7F7F7 · dot #B5B5B5
- Published: positive #D8FAEF / #13A181 · dot #16C49A
- Closed: warning #FFF5F0 / #E65B29 · dot #FF7747
- Archived: muted #F3F3F3 / #8A8A8A · dot #8A8A8A
- Active: positive #D8FAEF / #13A181 · dot #16C49A
- Inactive: neutral #F3F3F3 / #8A8A8A · dot #B5B5B5

## When to use
- **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

Use only for a value from a real status enum — not free-form labels, counts, or notification dots (those are Tag / Badge). Always keep the text label; the dot colour is decorative and never the sole signal.