Status Tag
Sourcecomponents/StatusTag.astro
Statuses
A small pill that carries a meaning — Success, Attention, Important, Highlighted or Neutral. The status drives both the label and the colour. Uppercase, no letter-spacing.
Each status
Success Attention Important Highlighted Neutral
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
status | 'success' | 'attention' | 'important' | 'highlighted' | 'neutral' | 'neutral' | Drives the label and colour. |
Usage
The label defaults from the status; slot in custom text to override it.
<StatusTag status="success" />
<StatusTag status="attention" />
<StatusTag status="highlighted">New</StatusTag>Rules
Do
Use it for a state — where something is in its lifecycle.
Let the status pick the colour; keep it consistent.
Don't
Use it as a content label on a card — that's a Badge.
Recolour it by hand — the status defines the palette.