Badge
Compact label for statuses, categories, or counts. Accepts a colored dot indicator and comes in five semantic variants.
Preview
Variants
DefaultBrandSuccessDangerWarning
With dot
OnlineOfflineAwayUnknown
Sizes
SmallMedium
Usage
jsx
import { Badge } from '@/components/ui'
<Badge class="text-sky-300">variant="success" dot>Active</Badge>
<Badge class="text-sky-300">variant="danger">Deprecated</Badge>
<Badge class="text-sky-300">variant="brand" class="text-sky-300">size="sm">New</Badge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'brand' | 'success' | 'danger' | 'warning' | 'default' | Color scheme of the badge. |
| size | 'sm' | 'md' | 'md' | Controls padding and font size. |
| dot | boolean | false | Prepends a colored status dot. |