Overview
DefaultSecondaryOutlineDestructiveSuccessWarningErrorInfo
Badge is a compact, non-interactive label. Use it to communicate status, categories, roles, or counts at a glance. Badges can include a leading icon or a colored status dot.
Installation
Usage
Variants
Badge has 8 semantic color variants to communicate different meanings.Default & Secondary
DefaultSecondaryOutline
Use Default for emphasis labels, Secondary for neutral tags, Outline for minimal de-emphasized labels.
Status Variants
SuccessWarningErrorInfoDestructive
When to use
- Status of table rows (active, pending, error)
- User role or permission labels
- Notification counts
- Category tags
When not to use
- Actionable elements — use Button instead
- Long text — badges are for short labels (1–3 words)
- Decorative purposes without meaning
With Dot Indicator
A colored dot replaces or precedes the label for compact status display.OnlineAwayOffline
Sizes
SmallMediumLarge
API Reference
string
default:"default"
Semantic color variant. Values:
default · secondary · outline · destructive · success · warning · error · infostring
default:"md"
Badge size. Values:
sm · md · lgboolean
default:"false"
Shows a colored status dot to the left of the label text.
ReactNode
Optional leading icon element rendered before the label.
ReactNode
Badge label text content.
string
Additional Tailwind classes for custom overrides.
Accessibility
- Badges are purely visual — use
aria-labelon the parent element to provide context for screen readers when the badge alone does not convey meaning - Avoid using color alone to convey status — always pair with a label or icon
- Do not use badges as interactive elements; use Button for clickable actions
Do’s & Don’ts
Do
- Use the correct semantic variant for the meaning (success → green, error → red)
- Keep badge text short — 1 to 3 words maximum
- Use dot badges when space is very limited
- Pair with icons for additional clarity in critical states
Don't
- Don’t use more than 2 different badge variants in the same table column
- Don’t make badges clickable — they are display-only
- Don’t use custom colors outside the design system variants
- Don’t place badges on top of images or complex backgrounds without sufficient contrast