Thinking Indicator

The universal "typing indicator" — three staggered dots next to real, visible text (not sr-only-only). role="status", the same polite live-region Toast uses for its non-urgent variants.

Examples

<ThinkingIndicator />

<ThinkingIndicator label="Generating" />

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

<ThinkingIndicator />

<kernel-thinking-indicator></kernel-thinking-indicator>

Props

Accessibility

• The label is real visible text, announced via role="status" — screen reader users get the same information as sighted users, not just a decorative animation.
• The three dots are aria-hidden — purely visual reinforcement of what the text already says.
• prefers-reduced-motion: reduce freezes the dots at a fixed opacity; the visible text keeps communicating the state either way.