TypingIndicator
Three bouncing dots that hold a chat message slot while an assistant (or a person) is composing a reply
Category: feedback · WCAG 2.2-AA · ai, chat, typing, loading, dots, thinking
Props
| Prop | Type | Default | Description |
|---|---|---|---|
ariaLabel | string | Assistant is typing | Accessible name announced by the status region. |
label | string | — | Alias of `ariaLabel` — the same invisible accessible name. Neither is deprecated. |
Design tokens
--cascivo-typing-indicator-color--cascivo-color-text-muted--cascivo-radius-full--cascivo-space-1--cascivo-space-2--cascivo-duration-loop-fast--cascivo-ease-in-out
When to use
- Holding the place of an assistant reply between sending a prompt and the first token arriving
- Showing that another participant in a conversation is composing a message
When not to use
- Naming what the AI is doing ("Searching…", "Generating…") or offering Stop — use AiStatus
- Once text has started streaming — render the text; the dots mean nothing has arrived yet
- Non-conversational loading — use Spinner or Skeleton
How to build an accessible TypingIndicator in React →
Examples
Default
<TypingIndicator />In a chat bubble
<ChatBubble name="Assistant"><TypingIndicator /></ChatBubble>A person typing
<TypingIndicator ariaLabel="Ada is typing" />Related components
- ChatBubble — Rendered as the content of a pending assistant ChatBubble
- AiStatus — AiStatus names the phase (thinking / generating) and can offer a Stop button
- Spinner — Spinner suits loading outside a conversation