Typing Indicator Text for React

Typing Indicator Text says who's typing, "Alice is typing", followed by three dots that rise and brighten one after the other, the small wave every chat app uses for a message being written. The dots scale with the text and take its colour, so it sits in a chat's footer, a message bubble or an assistant's reply slot without any styling of its own.

Use it while someone, or an assistant, is writing a reply. For a loading placeholder that becomes text, use Skeleton Text; for a status that's live, Status Pulse Text. It's CSS only: each dot runs one keyframe animation the install adds to your stylesheet, delayed by its place, with no script and no animation library. With reduced motion the dots hold still.

Installation

Usage

import {
  TypingIndicatorText,
} from "@/components/ui/typing-indicator-text";

<TypingIndicatorText text="Alice is typing" />

Demos

Bubble

hideText shows only the dots, here in a reply bubble; screen readers still hear the text. The dots are sized from the text, so a larger font gives larger dots.

Status

Render it inside an element with role="status" that's always on the page, and screen readers announce "Sam is typing" when it appears. duration is one wave of the dots, 1200 ms by default; a longer one feels calmer.

Accessibility

Screen readers hear the text once, as plain text, never the dots, which are hidden from them; with hideText the text is visually hidden but still read. To have the indicator announced when it appears, keep an element with role="status" on the page and render the indicator inside it when someone starts typing: a live region is only heard when its content changes, not when it arrives with the content already in it. The dots move without flashing, and with reduced motion they hold still.

FAQ

API Reference