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