Badge
View in Storybook
Explore interactive examples and all component variations in our Storybook.
The Badge component displays labels, status indicators, counters, and other highlighted information in a compact format. It offers different visual variants for various contexts and is perfect for tags, notifications, and status indicators.
Basic Usage
Default Badge
Variants
Default
Secondary
Destructive
Outline
With Icons
Favorite
Approved
Rejected
Pending
Order Status
Order #1234
Pending
Order #1235
Processing
Order #1236
Shipped
Order #1237
Delivered
Order #1238
Cancelled
Category Tags
Technologies
React
TypeScript
JavaScript
CSS
HTML
Node.js
Next.js
Tailwind
UI/UX
Frontend
Notification Counters
3
12
5
2
User Roles
JS
John Smith
john@example.com
Administrator
SJ
Sarah Johnson
sarah@example.com
Editor
MW
Mike Wilson
mike@example.com
Viewer
ED
Emma Davis
emma@example.com
Administrator
Interactive Badges
Removable Tags
React
TypeScript
Tailwind
Next.js
Properties
Badge
| Property | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "destructive" | "outline" | "default" | Visual variant of the badge. |
className | string | - | Additional CSS classes. |
children | ReactNode | - | Badge content. |
Variants
| Variant | Description | Recommended Use |
|---|---|---|
default | Primary badge with colored background | Active status, important information |
secondary | Badge with light gray background | Tags, categories, neutral information |
destructive | Red badge for alerts | Errors, critical status, destructive actions |
outline | Badge with border, transparent background | Pending status, secondary information |
Features
Visual Flexibility
- Multiple variants for different contexts
- Support for icons and custom content
- Easy customization with Tailwind CSS
Compact Design
- Optimized for small spaces
- Small but readable text
- Appropriate padding for different content
Versatility
- Works as label, status, counter
- Can be interactive or informational only
- Integrates well with other components
Common Use Cases
The Badge component is perfect for:
- Tags and Categories - Content categorization and organization
- Status Indicators - Order status, process states, progress indicators
- Notifications - Message counters, visual alerts, activity indicators
- Roles and Permissions - Access levels, user types, organizational hierarchies
- Product Labels - New, sale, featured, out of stock indicators
- Priority Levels - High, medium, low priority indicators
- Content Metadata - Author roles, publication status, content types
Best Practices
- Use appropriate variants - Choose variants based on context and importance
- Keep text concise - Badges should contain brief and clear information
- Be consistent - Use the same variants for similar contexts
- Consider contrast - Ensure text is readable against the background
- Test responsiveness - Check how badges behave on small screens
- Use sparingly - Too many badges can clutter the interface
- Provide context - Make sure the badge meaning is clear to users