StateBadge

stable

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

Human-in-the-Loop/Storybook ↗

import { StateBadge } 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 display.

staterequired

The AI interaction state to display.

Design Rationale

This component was designed to express:

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

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

5-level agency scale from autonomous to human-controlled

Was this helpful?