Display
Badge
A small status indicator or label used to highlight information or show a count.
Default
Secondary
Outline
Destructive
Premium Variants
Additional semantic variants for more specific status indicators.
Brand
Success
Warning
Info
Circular & Numeric
Use the icon size for perfectly circular badges, ideal for notifications and counts.
8
99
20+
With Icons
Combine badges with icons for more expressive labels.
Verified
Featured
Attention
Alert
Sizes
Different sizes for various layout requirements.
sm
Badge sm
md
Badge md
lg
Badge lg
icon
8
Props
| Prop | Type | Default |
|---|---|---|
variant | "default" | "secondary" | "outline" | "destructive" | "success" | "warning" | "info" | "brand" | "default" |
size | "sm" | "md" | "lg" | "icon" | "md" |
className | string | — |