Badge
Small status indicator for labeling, categorizing, or highlighting metadata.
Variants
Default
Secondary
Outline
Destructive
Status Variants
Info
Success
Warning
Danger
In Context
Status
Active
Priority
High
Version
v2.1.0
Environment
Staging
Usage
Use badges to label items with short metadata like status, category, or count.
Status variants (info, success, warning, danger) share color tokens with Tag, Alert, and Toast for design system consistency.
Keep text short (1-2 words). For longer content, consider using an Alert instead.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "secondary" | "destructive" | "outline" | "info" | "success" | "warning" | "danger" | "default" | Visual style of the badge |
| className | string | — | Additional CSS classes |