Feedback
Badge
Badge displays concise contextual information such as counts, statuses or notifications. It is commonly attached to other interface elements to draw attention without interrupting the user experience.
Examples
Primary
Success
Danger
Check
Warning
Error
Single
Double
Overflow
AccessibilityWCAG 2.1 Level AA Compliant
Features4 checks
- Sufficient colour contrast for digit/icon content (4.5:1 minimum)
- Never relies on colour alone, pair a count, icon or adjacent text for meaning
- Decorative glyphs marked aria-hidden; the count is exposed to assistive tech
- Border ring keeps the badge distinguishable from its host element
When to use this component
✓Do's
- •Showing an unread / item count on an icon
- •Signalling presence or status on an avatar
- •Marking verified, starred or admin accounts
- •Drawing attention to a small change on a host element
✗Don'ts
- •For text-based labels, use a Tag or Chip.
- •For longer messages, use an Alert.
- •For clickable actions, use a Button.
- •Provide an additional visual cue, such as text, an icon, or a count, instead of relying on color alone.
Do's and Don'ts
✓ Do's
3 unread notifications
Pair the badge with a count or accessible label so the meaning survives without colour.
✗ Don'ts
Something needs attention?
Don't rely on a bare coloured dot to convey a specific state, it's ambiguous and fails WCAG 1.4.1.