Data

StatusPill

Quiet machine-state pill — one status dot, monochrome text.

Preview

components/data/StatusPill.jsx

ran 07:15fired — standingneartrippedunlit

The dot is the only colored element, so a column of pills scans calmly. Editorial categories take Badge, not StatusPill.

Usage

src/components/ui/StatusPill.tsx

tsx

import { StatusPill } from "@/components/ui/StatusPill";

<StatusPill tone="ok">ran 07:15</StatusPill>
<StatusPill tone="warn">fired — standing until acted</StatusPill>
<StatusPill tone="idle">unlit</StatusPill>

API

props

Prop	Type	Default	Description
tone	"ok" \| "warn" \| "near" \| "danger" \| "idle"	"idle"	Machine state → dot hue. near aliases warn.
children	ReactNode	—	The state text — stays monochrome.

Tokens consumed

semantic only

--color-border--color-fg-muted--signal-live--signal-warn--signal-danger--radius-pill--text-2xs