AiStatus
Announces what an AI is doing — thinking, generating, done, failed or stopped — with a shimmering label and an optional Stop button
Category: feedback · WCAG 2.2-AA · ai, status, loading, thinking, generating, progress, stop
States
- thinking
- generating
- complete
- error
- stopped
Props
| Prop | Type | Default | Description |
|---|---|---|---|
status | 'thinking' | 'generating' | 'complete' | 'error' | 'stopped' | — | The phase: `thinking` (working, nothing produced yet), `generating` (output is streaming), `complete`, `error`, or `stopped` (the reader pressed Stop). |
label | ReactNode | — | Replaces the default text for the current status, e.g. "Searching 12 documents…". |
labels | { thinking?: string; generating?: string; complete?: string; error?: string; stopped?: string; stop?: string } | — | Overrides for the component’s user-visible strings (i18n). |
onStop | () => void | — | Called when the reader presses Stop. When set, a Stop button renders while the status is `thinking` or `generating`. |
Design tokens
--cascivo-color-ai--cascivo-color-text--cascivo-color-text-muted--cascivo-color-success--cascivo-color-destructive--cascivo-duration-loop-slow
When to use
- Telling the reader an AI request is in flight, and which phase it is in (thinking before output, generating while it streams)
- Offering a keyboard-reachable Stop while a response is being produced
- Reporting the terminal outcome of a generation — done, failed or stopped
When not to use
- Non-AI async work such as saving a form — use InlineLoading
- Holding the place of a chat reply with no text — use TypingIndicator
- Determinate progress with a known percentage — use ProgressBar
How to build an accessible AiStatus in React →
Examples
Thinking
<AiStatus status="thinking" />Generating, with Stop
<AiStatus status="generating" onStop={() => {}} />Custom label
<AiStatus status="thinking" label="Searching 12 documents…" />Complete
<AiStatus status="complete" />Error
<AiStatus status="error" />Related components
- ShimmerText — The in-progress label is rendered in ShimmerText
- InlineLoading — InlineLoading is the neutral, non-AI save/submit status
- TypingIndicator — TypingIndicator is the wordless placeholder inside a chat bubble
- Reasoning — Reasoning shows the model’s thinking while AiStatus reports the phase