Badge
A small status or category label.
Installation
import { Badge } from "~/components/ui/Badge";Usage
Active
<Badge>Active</Badge>Tones
NeutralPrimaryOnlinePendingOutage
<Badge>Neutral</Badge>
<Badge tone="primary">Primary</Badge>
<Badge tone="success">Online</Badge>
<Badge tone="warning">Pending</Badge>
<Badge tone="danger">Outage</Badge>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | "neutral" | "primary" | "success" | "warning" | "danger" | "neutral" | Semantic color of the badge. |
Accessibility
- Purely presentational by default; if the badge conveys status, include accompanying text rather than color alone.