Badge
Status badges with multiple variants and optional dot indicator. Use badges to label, categorize, or indicate status across your interface.
Variants
Preview
DefaultOnlineSecureCautionCriticalOutline
With Dot Indicator
Preview
OnlineConnectedError
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "primary" | "success" | "warning" | "destructive" | "outline" | "default" | Badge style variant. |
| dot | boolean | - | Show status dot indicator. |
| className | string | - | Additional CSS classes. |
Accessibility
- Renders as an inline
<span>element - Dot indicator is purely decorative and hidden from screen readers
- Use descriptive text content so the badge meaning is conveyed without relying on color alone
- Passes through all standard HTML attributes including
aria-*androle