Badge

Colours resolve from the brand feedback tokens (--success, --info, --warning, --destructive, ...), not fixed hexes — pass subtle for a tinted, lower-emphasis fill.

Props

Accessibility

• A badge is a <span> — it carries no semantics of its own. If it's conveying status information that matters (not just decoration), make sure that status is also stated in text nearby, not colour/badge-presence alone.
• Pass icon for tone="danger"/"warning" where possible — a shape, not just colour, helps for colour-blind and low-vision readers.

Do / Don't

• Do pick tone for meaning (positive = succeeded, danger = failed/blocked, neutral = no judgement), not for visual variety.
• Do use subtle in dense lists/tables where six solid-fill badges per row would be too loud.
• Don't put more than a couple of words in a badge — it's a label, not a sentence; use Callout or inline text for anything longer.