A compact row per tool that pairs identity, lifecycle state and progress in a single line — here a success, a running and a queued call stacked as an agent works.
Loading demo: tool-status-row-real-world
npx sdaia-ui@latest add tool-status-row
import { ToolStatusRow } from "sdaia-ui"1<ToolStatusRow2variant="neutral"3state="running"4name="search_web"5subtitle="Search server · attempt 1 of 3"6/>
Brand-tinted surface and pill — shown across all four states.
Loading demo: tool-status-row-brand
A raised surface with a neutral pill — the quiet default.
Loading demo: tool-status-row-neutral
A transparent surface with an outline pill.
Loading demo: tool-status-row-outline
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'brand' | 'neutral' | 'outline' | 'neutral' | optional |
state | 'queued' | 'running' | 'success' | 'failed' | 'queued' | optional |
name | ReactNode | — | required |
subtitle | ReactNode | — | optional |
statusLabel | ReactNode | — | optional |
showStatus | boolean | true | optional |
progress | number | — | optional |
showProgress | boolean | true | optional |
icon | string | — | optional |
showIcon | boolean | true | optional |
dir | 'ltr' | 'rtl' | 'ltr' | optional |
as | ElementType | 'div' | optional |