Badge
A small pill for status, counts, or category labels. Seven color variants with a dot prefix by default, swappable for an icon or stripped of chrome entirely with the plain prop.
Variants
Each variant gets a small dot indicator at the start of the label, except outline.
Default
Info
Success
Warning
Destructive
Muted
Outline
With icon
The withIcon prop swaps the dot for a default icon that matches the variant (info, success check, warning triangle, and so on).
Default
Info
Success
Warning
Destructive
Muted
Custom icon
Pass any hugeicons or lucide name to icon to override the default.
Published
Scheduled
Cancelled
Archived
Plain
plain removes the border, padding, and radius. Good inside tables or inline with body text.
Active
Pending
Failed
Synced
API Reference
Props, events, and slots for each sub-component.
Badge
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "info" | "success" | "warning" | "destructive" | "muted" | "outline" | "default" | Color of the dot or icon, and the overall tone. |
| icon | string | — | Icon name (hugeicons/lucide). Replaces the dot and disables the default icon. |
| withIcon | boolean | false | Use the default icon for the variant instead of the dot. |
| plain | boolean | false | Strip border, padding, and radius. Keeps only the dot or icon and the label. |
| class | string | — | Extra classes, merged with cn(). |