Status Badge
Outlined pill with a leading coloured dot for live state — Active, Pending, Blocked.
<HStack wrap> <StatusBadge intent="constructive">Active</StatusBadge> <StatusBadge intent="warning">Pending</StatusBadge> <StatusBadge intent="info">In review</StatusBadge> <StatusBadge intent="destructive">Blocked</StatusBadge> <StatusBadge intent="neutral">Draft</StatusBadge> <StatusBadge>Archived</StatusBadge></HStack>Usage
import { StatusBadge } from "@reva/ui";StatusBadge is a thin wrapper around <Badge variant="outline" intent="neutral"> with a leading coloured dot. Reach for it when a UI surfaces live state — "active right now", "awaiting review", "blocked". For labels and categories that carry identity (Premium, v2.0, Beta), use Badge instead. The two often appear side-by-side on the same row.
Chrome (border, padding, font-size, height, focus ring) is inherited from Badge, so any future Badge improvements show up here automatically.
Examples
Variants
The intent axis sets the dot colour — neutral (default), primary, accent, info, constructive, caution, warning, destructive. Only the dot colour differs; the outline pill chrome stays neutral across every intent.
<HStack wrap> <StatusBadge intent="neutral">Neutral</StatusBadge> <StatusBadge intent="info">Info</StatusBadge> <StatusBadge intent="constructive">Constructive</StatusBadge> <StatusBadge intent="caution">Caution</StatusBadge> <StatusBadge intent="warning">Warning</StatusBadge> <StatusBadge intent="destructive">Destructive</StatusBadge></HStack>Pulse
Set pulse to throb the leading dot — a subtle signal that the state is live or in progress (Watching, Syncing, Live). The animation honours prefers-reduced-motion: it holds steady for users who opt out of motion.
<HStack wrap> <StatusBadge intent="constructive" pulse>Live</StatusBadge> <StatusBadge intent="info" pulse>Syncing</StatusBadge> <StatusBadge intent="warning" pulse>Watching</StatusBadge></HStack>Default
Omit intent to render the neutral style — useful for Draft, Archived, or any state without a specific intent.
<HStack wrap> <StatusBadge>Draft</StatusBadge> <StatusBadge>Archived</StatusBadge> <StatusBadge>Idle</StatusBadge></HStack>Long labels
The pill grows to fit the label — there's no truncation. Keep status labels concise (one or two words) so a row of badges still reads at a glance.
<HStack wrap> <StatusBadge intent="info">Pending compliance review</StatusBadge> <StatusBadge intent="warning">Awaiting client signature</StatusBadge> <StatusBadge intent="destructive">Blocked by missing KYC</StatusBadge></HStack>Inside a table cell
A common placement — a Status column in a list view.
| Household | Status |
|---|---|
| Acme Family | Active |
| Beech Holdings | Pending |
| Cedar Trust | Blocked |
| Driftwood Capital | Draft |
<Table> <TableHeader> <TableRow> <TableHead>Household</TableHead> <TableHead>Status</TableHead> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell>Acme Family</TableCell> <TableCell> <StatusBadge intent="constructive">Active</StatusBadge> </TableCell> </TableRow> <TableRow> <TableCell>Beech Holdings</TableCell> <TableCell> <StatusBadge intent="warning">Pending</StatusBadge> </TableCell> </TableRow> <TableRow> <TableCell>Cedar Trust</TableCell> <TableCell> <StatusBadge intent="destructive">Blocked</StatusBadge> </TableCell> </TableRow> <TableRow> <TableCell>Driftwood Capital</TableCell> <TableCell> <StatusBadge>Draft</StatusBadge> </TableCell> </TableRow> </TableBody></Table>Accessibility
The dot is decorative (aria-hidden="true"); the label text is the announced content. Keep labels readable on their own ("Active", "Blocked") rather than relying on colour alone — the intent's dot colour reinforces the meaning but is not a substitute for clear copy.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
intent | "neutral" | "primary" | "accent" | "info" | "constructive" | "caution" | "warning" | "destructive" | "neutral" | Sets the leading dot colour from the matching semantic intent token. The outline pill chrome is identical across every intent. |
pulse | boolean | false | Throb the leading dot to signal a live / in-progress state. Honours prefers-reduced-motion — the dot holds steady when motion is reduced. |
asChild | boolean | false | Inherited from Badge — merge props onto the child element (e.g. <a>) instead of rendering a span. |
className | string | — | Additional Tailwind / utility classes merged onto the underlying Badge. |
StatusBadge extends Omit<BadgeProps, "variant" | "intent">, so it accepts every standard span attribute (id, aria-*, …) and the asChild escape hatch — the underlying Badge is locked to variant="outline" intent="neutral", so the pill chrome stays neutral while the StatusBadge intent drives only the dot.