Badge

Badge is a small uppercase pill for status and priority labels: WON, AT RISK, HIGH. Each tone is a soft tinted background with a same-hue label, and every hue resolves from the host’s tokens, so a badge reads native in any host. The preview below is the real component from @nimblebrain/synapse/ui, live.

import { Badge } from "@nimblebrain/synapse/ui";

<Badge tone="success">Won</Badge>;

Tones

Six tones map to the recurring label meanings. neutral is the default; accent for informational, success / warning / danger for state, and processing for in-flight work.

<Badge>Neutral</Badge>
<Badge tone="accent">Accent</Badge>
<Badge tone="success">Success</Badge>
<Badge tone="warning">Warning</Badge>
<Badge tone="danger">Danger</Badge>
<Badge tone="processing">Processing</Badge>

Props

Badge extends the native HTMLAttributes for a <span>, so className, style, aria-*, and other span attributes pass through.

Prop	Type	Default
`tone`	`"neutral"` \| `"accent"` \| `"success"` \| `"warning"` \| `"danger"` \| `"processing"`	`"neutral"`
`children`	`ReactNode`	None
`…rest`	`HTMLAttributes<HTMLSpanElement>`	None

StatusDot: a dot for run/task status.
ListRow: drop a Badge into its trailing slot.
Table: render a Badge inside a status column.