StatusDot
StatusDot is a small colored dot for run and task status. The working state
gets a living ripple-pulse (gated on prefers-reduced-motion); completed,
failed, and idle are steady. Colors resolve from the host’s tokens, so status
reads identically in a list row or a detail header, in any host. The preview
below is the real component from @nimblebrain/synapse/ui, live.
import { StatusDot } from "@nimblebrain/synapse/ui";
<StatusDot status="working" />;Statuses
Section titled “Statuses”Four statuses cover the run lifecycle. Pass color to override the hue for a
bespoke state, and size to change the diameter.
<StatusDot status="working" /><StatusDot status="completed" /><StatusDot status="failed" /><StatusDot status="idle" /><StatusDot color="#a855f7" size={12} />StatusDot extends the native HTMLAttributes for a <span> (minus color),
so className, style, aria-*, and other span attributes pass through.
| Prop | Type | Default |
|---|---|---|
status |
"working" | "completed" | "failed" | "idle" |
"idle" |
color |
string |
None |
size |
number |
8 |
…rest |
HTMLAttributes<HTMLSpanElement> |
None |