Badge & status tags
Compact labels for statuses, counts, and commodity tags.
Variants
Semantic tones for state and severity.
DefaultSecondaryOutlineErrorOnlineDegradedSyncing
Commodities
Per-commodity color coding used across dashboards.
ElectricityWaterGasTemperatureEmissions
Dot badge
Minimal badge with a leading status dot.
Online
Status tag — in progress
A tag indicating work that is underway.
DR Active
Status tag — blocked
A tag flagging an item that is blocked.
Alarm
Status tag — completed
A tag confirming finished work.
Online
Dismissible
A badge with a close button to remove it.
Peak
API reference
A compact pill label (renders a span by default) for statuses, counts, and tags.
Anatomy
Badge | Compact rounded pill for status, counts, or labels. |
Props
| Part | Prop | Type | Default | Description |
|---|---|---|---|---|
Badge | variant | "default" | "secondary" | "destructive" | "success" | "warning" | "info" | "electricity" | "water" | "gas" | "temperature" | "emissions" | "outline" | "ghost" | "link" | "default" | Color/style: default, semantic, per-commodity, outline, ghost, link. |