Badge
A small label for status, counts, tags, or short categorical text. Seven semantic variants ship out of the box.
Variants
QuestInfoNEW+200 XPLow HPBossNPC
With an icon
Saved Unsaved
Accessibility notes
- Badge is a non-interactive
<span>— purely visual. If the badge conveys live state (e.g. a notification count), wrap it in a region witharia-live=“polite”on the parent. - Colour alone never carries meaning. Always pair the badge with text or a paired icon so it remains intelligible to colour-blind users and at 4:1 contrast.