Status Badge
StatusBadgeComponent (state: success/warning/danger/info/neutral, label: string)
All states
Paid
Pending review
Failed
Processing
Draft
Category pill (taxonomy, not state)
Use .pill for non-state labels like category/type. It's visually distinct from status badges (no dot, square-ish weight) so users don't confuse "what kind" with "what state."
Electronics
Accessories
Apparel
Domain mapping example (Order status)
| Order state | Badge |
|---|---|
| Fulfilled / Paid out | Success |
| Awaiting review | Warning |
| Refunded / Chargeback | Danger |
| In progress | Info |
| Draft / Not yet submitted | Neutral |