Badges
Small status indicators and labels with 5 color variants.
Badge Variants
Badges come in five semantic variants matching the color system.
Badge Variants
PrimarySecondarySuccessDangerWarning
Pill Badges
Add badge-pill for fully rounded badges.
Badge Groups
Use badge-group to properly space multiple badges.
Badge Group
ReactTypeScriptTailwind+3
Common Use Cases
Status Indicators
Status Badges
Order #1234Delivered
Order #1235Pending
Order #1236Cancelled
Notification Counts
Notification Badges
Tags and Labels
Tags
Building Modern Web Apps
JavaScriptReactTutorial
Learn how to build scalable web applications...
Best Practices
✓ Do
- Use for status indicators
- Keep text short (1-2 words)
- Use consistent colors across your app
- Use pill variant for counts
✗ Don't
- Use for long text content
- Overuse multiple badges together
- Use as clickable buttons (use tags)
- Mix too many different colors
Accessibility
Best Practices:- Use semantic HTML when possible
- Don't rely solely on color to convey meaning
- Add
aria-label for icon-only badges - Ensure sufficient color contrast (all variants meet WCAG AA)
- Use
role="status" for dynamic count updates
