StateIndicator

stable

Animated dot indicator for AI interaction states — CSS-only animations with prefers-reduced-motion support

import { StateIndicator } from "@nodus/design-system/patterns"

Demo coming soon

Props

Prop	Type	Default	Description
`state`req	`'loading' \| 'thinking' \| 'acting' \| 'confirming' \| 'error' \| 'recovery'`	—	The AI interaction state to animate.
`size`	`'sm' \| 'md'`	'md'	Dot size: sm=8px, md=12px.

staterequired

The AI interaction state to animate.

size

Type 'sm' | 'md'Default 'md'

Dot size: sm=8px, md=12px.

Design Rationale

This component was designed to express:

Color-coded uppercase badge for the six canonical AI interaction states (loading, thinking, acting, confirming, error, recovery)

Linear step sequence for documenting agent interaction flows — shows state badge, copy, and annotation per step

Animated loading indicator communicating an agent is actively processing. Supports text label, step counter, and elapsed time. Uses temporal color.

Was this helpful?