Badge
A small status indicator for labeling and categorization. Perfect for tags, statuses, and notifications.
Interactive Playground
Badge
Try different variants and sizes
Badge
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'default' | Visual style of the badge |
size | 'sm' | 'md' | 'lg' | 'md' | Size of the badge |
class | string | '' | Additional CSS classes |
Examples
Basic Usage
All Variants
default primary secondary success warning error info
Sizes
sm md lg
Use Cases
- Status indicators - Active, Pending, Error states
- Tags and labels - Categories, types, filters
- Notifications - Counts, new items
- Feature flags - Beta, New, Pro labels