Badge
A small label for status, categories or counts.
Variants
Use the variant prop to communicate meaning or category.
DefaultPrimarySuccessWarningError
<Badge variant="default">Default</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>Sizes
Use the size prop to control the badge's padding and font size.
SmallMedium
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>Dot indicator
Set dot to prepend a colored dot matching the current variant.
ActivePendingOffline
<Badge variant="success" dot>Active</Badge>
<Badge variant="warning" dot>Pending</Badge>
<Badge variant="error" dot>Offline</Badge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'primary' | 'success' | 'warning' | 'error' | 'default' | Color style conveying meaning |
size | 'sm' | 'md' | 'md' | Controls padding and font size |
dot | boolean | false | Prepends a colored dot matching the variant |
className | string | — | Additional Tailwind classes |