TypingIndicator

TypingIndicator

<ChatList>
  {messages.map((m) => <ChatMessage key={m.id} {...m} />)}
  {peerTyping ? <TypingIndicator name="Alice" /> : null}
</ChatList>

Install: @helixui/core

import { TypingIndicator } from '@helixui/core'

status: stable · since: 0.3.0

Tags: typing, dots, pill

Anatomy

( ● ● ● )   ← bouncing dots

Layout

• display — inline-block
• width — content
• height — content
• intrinsicSize — ~36×20px pill
• stackable — false
• fullBleed — false

Visual

A small pill containing three dots that bounce in sequence. Indicates the other participant is composing a message.

Props

Name	Type	Default	Description
name	ReactNode	—	Optional speaker name rendered to the left of the dots (‘Alice’).

Tokens used

color.bg.action.neutral.default, color.text.secondary, color.text.muted, radius.full, space.2, space.3, font.family.sans, font.size.sm

Accessibility

Role: status

Notes

• Container is role="status" with aria-live="polite" and an aria-label like “Alice is typing”.
• Animation respects prefers-reduced-motion.

Composes with

Component	Relation	Note
ChatMessage	alternative	Render in place of a ChatMessage when the participant is typing.
StreamingIndicator	alternative	StreamingIndicator is for the streaming token, not “is typing”.
ChatList	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

show “is typing”

“three-dot typing indicator”

<TypingIndicator />

Related

• ChatMessage
• ChatList