Overview
Foundations
Brand
Colors
Typography
Spacing & Layout
Semantic Tokens
Icons
Shadows
Components
Patterns
Design System
Badge
Badges are compact status indicators used to label, categorise, or highlight items. They support six semantic colour schemes that automatically adapt between subtle (light mode) and solid (dark mode) weights via semantic tokens.
Variants
Badges render as subtle (tinted background, coloured text) in light mode and automatically switch to solid (saturated background, white text) in dark mode. No additional prop is needed — the semantic tokens handle the transformation.
Specifications
Padding
8px 4px
Font Size
12px
Border Radius
4px
Font Weight
Medium 500
Neutral Background
status.neutral.bg
Neutral Text
status.neutral.text
Success Background
status.success.bg
Success Text
status.success.text
Warning Background
status.warning.bg
Warning Text
status.warning.text
Danger Background
status.danger.bg
Danger Text
status.danger.text
Accent Background
status.accent.bg
Accent Text
status.accent.text
Info Background
status.info.bg
Info Text
status.info.text
Gap With Icon
6px
Theming
Badge colours are driven by semantic tokens that automatically switch between subtle (light) and solid (dark) appearances. Each token resolves to a different value depending on colour mode.
Variant
Token
Light (Subtle)
Dark (Solid)
Neutral
status.neutral.bg
gray.100
gray.900
status.neutral.text
gray.700
white
Success
status.success.bg
green.100
green.600
status.success.text
green.700
white
Warning
status.warning.bg
amber.100
amber.600
status.warning.text
amber.700
white
Danger
status.danger.bg
red.100
red.600
status.danger.text
red.700
white
Accent
status.accent.bg
secondary.100
secondary.600
status.accent.text
secondary.700
white
Info
status.info.bg
blue.100
blue.600
status.info.text
blue.700
white
Best Practices
Do
Use short, scannable labels (1-2 words)
Let semantic tokens handle light/dark adaptation automatically
Use semantic variants consistently (green = success)
Pair an icon when the badge appears without surrounding context
Don't
Don't use badges for lengthy descriptions
Don't override token values with hardcoded colours
Don't rely on colour alone to convey meaning
Don't stack more than three badges in a row
Accessibility
WCAG AA Compliant
All badge variants meet WCAG AA contrast requirements. Subtle badges maintain a minimum 4.5:1 text-to-background ratio; solid badges use white text on dark fills for maximum legibility.
Colour Is Not the Only Indicator
Always pair badge colour with a text label so colour-blind users can distinguish between statuses. Use icons for additional reinforcement when possible.
Screen Reader Support
Badges are inline and read as part of the surrounding text flow. For dynamic status changes, use aria-live regions so assistive technology announces updates.