Badge
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
This feature is available on the Pro plan
Beta Testing
Currently in beta testing phase
Deprecated API
This 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 (العربية)
Common Use Cases
- •Status Indicators: Show active, pending, completed, or error states
- •Categories and Tags: Label content with categories or keywords
- •Notification Counts: Display unread message or notification counts
- •Feature Highlights: Mark features as "New", "Beta", or "Pro"
- •Version Labels: Show version numbers or release stages
- •Role Indicators: Display user roles like "Admin", "Moderator", "Member"