Badge
Badges communicate status, category, or metadata at a glance. They are non-interactive labels — use them to tag content, indicate state, or highlight counts. Keep badge text short: one or two words maximum.
Variants
Default
DefaultPrimary emphasis
Secondary
SecondaryNeutral emphasis
Outline
OutlineSubtle, bordered
Destructive
DestructiveError or warning
Usage Guidelines
Do
Use badges for short status labels like 'New', 'Beta', or count indicators.
Don't
Don't use badges for long text or full sentences. Keep them to 1-2 words.
Do
Use Destructive for error counts or critical statuses that need immediate attention.
Don't
Don't overuse Destructive badges — they lose impact when everything looks urgent.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "secondary" | "destructive" | "outline" | "default" | Badge style variant |