TypingDots
typing-dotsSignals that a conversational participant is composing a response.
Usage
Basic usage
Three-point staggered bouncing "inputting" indication (pure CSS·reduced-motion automatically stops, role=status screen reading broadcast).
tsx
<TypingDots />Inside the bubble
Put it into the surface bubble, which is equivalent to occupying a place in the generation of the ChatMessage loading state.
tsx
<span className="inline-flex rounded-[var(--radius)] bg-surface px-3.5 py-2.5">
<TypingDots />
</span>Accessibility Label
label covers the screen reading copy (default is "typing").
tsx
<TypingDots label="Hulian AI is thinking" />When to Use
Use it to indicate that another person or agent is typing. ChatMessage already renders it for loading; use TypingDots directly only when a custom container needs the indicator on its own.
Import
ts
import { TypingDots } from "@hulianui/ui"Props
Inherit HTMLAttributes<HTMLSpanElement> (including className, etc.).
| Name | Type | Default | Description |
|---|---|---|---|
| label | string | "\u6b63\u5728\u8f93\u5165" (Typing) | Accessible status label announced through role="status" |
Usage Guidelines
- The pure CSS animation honors
prefers-reduced-motion; the dots stop bouncing automatically, so consumers do not need a separate motion check.
Related
Conversation · ChatMessage · PromptInput · ThinkingBlock · ToolCall · AgentPlan
Playground
<TypingDots />