TypingIndicator

Stable
WCAG 2.2 evidence
RTL

Shows that someone is writing a reply: three dots in a bubble and a short text. The root is a polite status live region (aria-live="polite", aria-atomic="true"): the text is announced once when it appears or changes, without interrupting (WCAG 4.1.3). Keep the component mounted for the whole conversation and change its children; a live region inserted together with its text is not announced reliably. The dots are decorative (aria-hidden); the text says what is happening, so nothing depends on the animation (1.4.1). The dots pulse only when the user has not asked for reduced motion and stop within 5 s (2.2.2, 2.3.3). Presentational: renders in React Server Components. Consumer duties: the wording and its translation; clearing the text when the person stops typing; not announcing your own typing.

import { TypingIndicator } from "@nexera-ui/react";

Loading example…

4
examples: 1
props: 1
live controls: 1
platform: 8
WCAG criteria: 2
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

children

Generated code

import { TypingIndicator } from "@nexera-ui/react";

<TypingIndicator />

Examples 3

The same examples as Storybook, rendered live. Open Code to copy one.

Live

Keep the indicator mounted and change its text: someone starts and stops typing every few seconds. With a screen reader, the text is announced politely each time it appears.

Loading example…

app.tsx

import { useEffect, useState } from "react";
import { TypingIndicator } from "@nexera-ui/react";

export function Live() {
  const [typing, setTyping] = useState(true);
  useEffect(() => {
    const id = setInterval(() => {
      setTyping((value) => !value);
    }, 4000);
    return () => {
      clearInterval(id);
    };
  }, []);
  return (
    <div className="flex min-h-7 max-w-xl flex-col gap-2">
      <TypingIndicator>{typing ? "Ayesha is typing" : null}</TypingIndicator>
    </div>
  );
}

Several people

Several people: the text wraps under the dots in a narrow container.

Loading example…

app.tsx

import { TypingIndicator } from "@nexera-ui/react";

<div className="max-w-[12rem]">
  <TypingIndicator>Ayesha Khan, Bilal Ahmed and Sara Malik are typing</TypingIndicator>
</div>;

Right to left

Right-to-left: the dots move to the right.

Loading example…

app.tsx

import { TypingIndicator } from "@nexera-ui/react";

<TypingIndicator>عائشة تكتب</TypingIndicator>;

Props 1

Press "Try it" on a card to load that prop into the playground.

childrenNexera

ReactNode

Who is typing, for example "Ayesha is typing" or "Ayesha and Bilal are typing". Pass nothing (or an empty string) while nobody is typing: the indicator then renders an empty, invisible status region, so the next text is announced.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

4 direct · 4 supporting

1.1.1Non-text ContentLevel A · tested directly
1.3.1Info and RelationshipsLevel A · tested directly
1.4.1Use of ColorLevel A · tested directly
1.4.10ReflowLevel AA · supporting test
1.4.12Text SpacingLevel AA · supporting test
2.2.2Pause, Stop, HideLevel A · supporting test
2.3.3Animation from InteractionsLevel AAA · supporting test
4.1.3Status MessagesLevel AA · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

Usage

<TypingIndicator className="shadow-sm" />

Theme studio

TypingIndicator

Try every prop. Copy the code.

Examples 3

Live

Several people

Right to left

Props 1

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components