Small status indicator or label. Perfect for displaying counts, statuses, categories, and notifications with full RTL support.
Preview
Installation
Usage
Examples
Variants
With Icons
Status Indicators
In Card Headers
Premium Feature
ProThis feature is available on the Pro plan
Beta Testing
BetaCurrently in beta testing phase
Deprecated API
DeprecatedThis API will be removed soon
In Lists
- Dark Mode SupportIncluded
- Advanced AnalyticsComing Soon
- Legacy APIDeprecated
- DocumentationIn Progress
Notification Count
Custom Sizes
Custom Colors
Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'secondary' | 'destructive' | 'outline' | 'default' | Visual style variant of the badge |
className | string | undefined | Additional CSS classes to apply |
The Badge component extends all standard HTML div attributes including onClick and other event handlers.
Accessibility
Semantic HTML
Badges render as div elements and are purely presentational. They should be used alongside meaningful text.
Screen Readers
Badge text is announced by screen readers. Use descriptive text rather than ambiguous labels like "New" without context.
Color Alone
Don't rely solely on color to convey information. Use text and icons to ensure the meaning is clear for users with color vision deficiencies.
Interactive Badges
If a badge is clickable, wrap it in a button or add proper role, tabIndex, and keyboard handlers.
RTL Considerations
Badges automatically support RTL layout. Icons and text flow correctly in right-to-left languages.
LTR (English)
RTL (العربية)
Best Practices
Do
- ✓ Use consistent colors for the same status across the app
- ✓ Keep badge text short (1-2 words)
- ✓ Pair with descriptive labels for screen readers
- ✓ Use semantic variants (success, warning, destructive) appropriately
Don't
- ✗ Don't use too many badge variants in one view
- ✗ Don't rely on color alone — add text for accessibility
- ✗ Don't use badges for long text — use Alert or Callout instead
- ✗ Don't nest badges inside other badges