AI chat

Typing indicator

Three animated dots meaning "a reply is coming".

Server safeSource

Import

import { TypingIndicator } from '@the_viveksingh/vivek-ui'

Three dots

active={false} stops the animation without unmounting, which keeps the row height stable instead of making the thread jump.

Assistant is typing

Set active={false} to stop the animation without unmounting, which keeps the row height stable.

<TypingIndicator />
<TypingIndicator size="sm" />
<TypingIndicator active={false} />

With a label

showLabel makes it visible; either way label is the accessible name, so a screen reader is told someone is typing.

Assistant is typing

Priya is typing

<TypingIndicator showLabel label="Assistant is typing" />
<TypingIndicator showLabel label="Priya is typing" size="sm" dots={4} />

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for TypingIndicator
Prop	Type	Default	Description
`label`	`string`	—	Announced text. Defaults to `Assistant is typing`.
`showLabel`	`boolean`	—	Also show the label on screen. Off by default: the dots carry the meaning.
`dots`	`number`	—	How many dots. Defaults to 3.
`size`	`'sm' \| 'md'`	—	—
`active`	`boolean`	—	When `false` the live region stays mounted but empty. Use this when you want a guaranteed announcement — see the accessibility note on the component.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

TypingIndicator carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.