AI Status Indicator
A fixed set of statuses that signal exactly what the assistant is doing, from thinking to tool success — shown here as an at-a-glance status strip.
Loading demo: ai-status-indicator-real-world
Installation
npx sdaia-ui@latest add ai-status-indicator
Usage
import { AiStatusIndicator } from "sdaia-ui"1<AiStatusIndicator2status="thinking"3appearance="brand"4/>
Examples
Brand
Tinted semantic fill + border — the default appearance.
Loading demo: ai-status-indicator-brand
Neutral
Neutral fill + border, with a semantic icon only.
Loading demo: ai-status-indicator-neutral
Outline
Transparent fill with a semantic border.
Loading demo: ai-status-indicator-outline
Without icon
Hide the leading icon with showIcon={false}.
Loading demo: ai-status-indicator-without-icon
API Reference
Prop | Type | Default | Required |
|---|---|---|---|
status | 'thinking' | 'tool-running' | 'tool-success' | 'tool-error' | 'source' | 'model' | 'agent' | 'memory' | — | required |
appearance | 'brand' | 'neutral' | 'outline' | 'brand' | optional |
showIcon | boolean | true | optional |
label | ReactNode | — | optional |
dir | 'ltr' | 'rtl' | — | optional |