7onicDESIGN SYSTEM

TypingIndicator

Animated typing indicator for chat and AI interfaces — 2 variants (dots bounce, cursor blink), 3 sizes, 3 colors, speed control, and optional label

2
Variants
3
Sizes
3
Colors
Pure
React

Playground

Preview
dotsdefaultmuted
Variant
Size
Color
Speed
Options
<TypingIndicator />

Variants

Dots
Three dots bouncing in sequence — ideal for chat bubbles
Chat
Cursor
Blinking text cursor — ideal for indicating AI is thinking
AI

Sizes

sm
Dot4px
Cursor2×14px
default
Dot6px
Cursor2.5×20px
lg
Dot8px
Cursor3×26px

Features

Color

Three color options adapt to various backgrounds and themes.

default
primary
muted
<TypingIndicator color="default" />
<TypingIndicator color="primary" />
<TypingIndicator color="muted" />

Speed

Adjust animation speed in three steps. Available for the dots variant only.

slow
default
fast
<TypingIndicator speed="slow" />
<TypingIndicator speed="default" />
<TypingIndicator speed="fast" />

Label

Enable showLabel to display a text label alongside the animation.

AI is typing...
<TypingIndicator showLabel label="AI is typing..." />

API

Component Structure

TypingIndicator— Pure React

Standalone component — no sub-components

Props

variant"dots"
"dots" | "cursor"

Animation style — dots: bouncing dots, cursor: blinking cursor

size"default"
"sm" | "default" | "lg"

Size

color"muted"
"default" | "primary" | "muted"

Color — default: foreground, primary: brand, muted: subtle color

speed"default"
"slow" | "default" | "fast"

Animation speed (dots variant only)

label"Typing"
string

Accessible label (aria-label) and text shown when showLabel is true

showLabelfalse
boolean

Render label text alongside the indicator

classNameundefined
string

Additional CSS classes

Anatomy

1
2
3
label
4
1
Container
Flex container (role=status + aria-live)
2
Dot
Bouncing dot (×3)
3
Cursor
Blinking cursor
4
Label
Optional label text

Best Practices

✓

Recommended

  • ✓Show while waiting for a reply in chat UI
  • ✓Use the dots variant during AI response generation
  • ✓Use showLabel to provide context for screen readers
✕

Don't

  • ✕Don't use TypingIndicator for long loading — use Spinner instead
  • ✕Don't use for full-page loading — intended for chat UI
  • ✕Don't leave the animation running in the background indefinitely

Accessibility

ARIA / WCAG

  • role="status" — applied automatically
  • aria-label="Typing" — default value
  • label prop for custom label
  • prefers-reduced-motion supported