Components
LiveBadge
The “in motion” indicator — mono elapsed readout with a pulsing live dot.
Preview
components/feedback/LiveBadge.jsx03mo 12d 06hlive
00mo 01d 18hcrawling
The live green is a status hue — it never colors series data, fills, or decoration.
Usage
src/components/ui/LiveBadge.tsximport { LiveBadge } from "@/components/ui/LiveBadge";
// Elapsed is a preformatted tabular string — the Processes band
// computes it from the project's startedAt date every minute.
<LiveBadge elapsed="03mo 12d 06h" />
<LiveBadge elapsed={elapsed} label="crawling" />API
props| Prop | Type | Default | Description |
|---|---|---|---|
| elapsed | string | "00mo 00d 00h" | Preformatted tabular readout, rendered in the mono stack. |
| label | string | "live" | The pulsing status word next to the green dot. |
Tokens consumed
semantic only--signal-live--color-fg-subtle--font-mono