components
Badge
A badge is a label. It communicates status or category at a glance — it never initiates an action. Pick the variant by meaning, not by colour preference.
Read the full specVariants
Seven variants, each with a fixed semantic meaning. `default` is brand green; status variants track risk taxonomy.
Default
Secondary
Outline
Destructive
Success
Warning
Info
tsx
import { Badge } from "@wolf/design-system";
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="info">Info</Badge>With icon
Icons are Lucide at `size-3` with a trailing 4px gap. Pair icons with text; never icon-only — screen readers lose the meaning.
New
Armed response
Resolved
Investigating
Critical
Advisory
tsx
<Badge variant="success">
<Check className="size-3" aria-hidden /> Resolved
</Badge>In context
Badges typically ride alongside a title or row. Keep them short — one or two words — so they read at a glance.
Armed response
Camps Bay patrol vehicle
Live
Incident #2189
Reported 12 minutes ago
Investigating
Perimeter alarm
North gate, Bishopscourt
Critical
tsx
<h3 className="flex items-center gap-2">
<span>Armed response</span>
<Badge variant="success">Live</Badge>
</h3>