Status Indicator
An inline colored dot for communicating connection, system, or agent state.
StatusIndicator is the lowest-level state primitive. A dot and an optional label. It powers the AgentStatus pattern and is useful anywhere a compact inline state signal is needed.
All states
activependingidlesuccesswarningerror
<StatusIndicator state="active" label="Active" />
<StatusIndicator state="pending" label="Pending" />
<StatusIndicator state="idle" label="Idle" />
<StatusIndicator state="success" label="Success" />
<StatusIndicator state="warning" label="Warning" />
<StatusIndicator state="error" label="Error" />active and pending animate with a pulse. All others are static.
Sizes
smmd
<StatusIndicator state="active" size="sm" />
<StatusIndicator state="active" size="md" /> {/* default */}Props
| Prop | Type | Default | Description |
|---|---|---|---|
state | "active" | "idle" | "success" | "warning" | "error" | "pending" | "idle" | The current state. Drives dot color and animation. |
size | "sm" | "md" | "md" | Dot size. |
label | string | — | Optional text label rendered beside the dot. |
className | string | — | Layout overrides. |
Source
packages/ui/src/status-indicator.tsx — copy into components/ui/status-indicator.tsx in your project.