StatusDot

A dot + mono label for live run/service state.

jsx

<StatusDot state="running" pulse>run abc · execution</StatusDot>
<StatusDot state="queued">queued</StatusDot>     // hollow ring
<StatusDot state="done">settled</StatusDot>      // filled, same hue as queued
<StatusDot state="failed">provider error</StatusDot>

state: workflow vocabulary queued · running · needs-input · needs-review · done · failed (snake_case accepted), plus legacy idle · warn · error. pulse adds a breathing halo for live activity; it is suppressed under prefers-reduced-motion (a steady halo remains). Queued is hollow, done is filled — mark, not colour, separates them.

Preview

Declarations

TypeScript

export interface StatusDotProps extends React.HTMLAttributes<HTMLSpanElement> {
  /** Workflow state (queued | running | needs-input | needs-review | done |
   *  failed) or legacy outcome (idle | warn | error). Queued renders hollow,
   *  done filled — same hue, told apart by mark. snake_case accepted. */
  state?: WorkflowState | 'idle' | 'warn' | 'error';
  /** Halo pulse for live activity. Suppressed under prefers-reduced-motion. */
  pulse?: boolean;
  className?: string;
  children?: React.ReactNode;
}

/**
 * A coloured dot + mono label for live run/service state.
 */
export function StatusDot(props: StatusDotProps): React.JSX.Element;