Badge
A small labelled element used to display status, count, or category information inline.
Plain English
Badges are the small labels you attach to content to add metadata — "New", "Beta", "5 unread", "Paid". They are highly visible despite being small because of their distinct shape (pill or rounded) and often contrasting background. Good badge design: a single clear piece of information, enough padding to not feel cramped, appropriate semantic colour for status badges, and text short enough to be read at a glance.
Technical
Badge CSS: display: inline-flex, align-items: center, padding: 2-4px 8-10px, border-radius: 4-999px (pill), font-size: 11-13px, font-weight: 500-600, background-color + color. Status badges use semantic colours (success green, error red, warning amber). Dot badges (notification indicators): 8px circles, position: absolute on the parent. Count badges: min-width: 20px, height: 20px, border-radius: 10px for pill. White border on badge positioned over an avatar: box-shadow: 0 0 0 2px white.
Live Demo
Status badges
Category badges
Count badges
Dot badges
Badges communicate status at a glance. Max 2 badges per item to avoid overload.
Usage
✓ Good usage
A green "Active" badge and a red "Expired" badge in a subscription list — clear, semantic, instantly scannable status indicators.
✗ Bad usage
A badge with 5-word label text — badges are designed for short labels; long text should be in a normal text element.
Recommended values
- Standard badge padding: 2px 8px
- Pill badge: border-radius: 999px
- Square badge: border-radius: 4-6px
- Font: 11-12px, 500-600 weight
- Status colours: green/red/amber/blue semantic families
- Max label length: 1-2 words
Common mistakes
- Badge text too long — badges are for 1-2 word status labels.
- Badges using colour only — always include text for accessibility.
- Too many badge variants in one product — creates visual chaos.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Status badges: 2px/8px padding, border-radius: 999px, 12px/500 weight. Semantic colours: active=green, inactive=grey, pending=amber, error=red — each with light background, medium border, dark text from the same colour family.