A series of milestones tracking a tool run from accepted through to completed — each with a status icon, a timestamp and a short description.
Loading demo: tool-timeline-item-real-world
npx sdaia-ui@latest add tool-timeline-item
import { ToolTimelineItem } from "sdaia-ui"1<ToolTimelineItem2variant="neutral"3state="running"4timestamp="14:02:12"5title="Streaming records"6description="Loaded 42 of 80 result chunks · 1.8 s elapsed."7/>
Brand-tinted surface with a brand border — shown across all three milestones.
Loading demo: tool-timeline-item-brand
A raised surface with a default border — the quiet default.
Loading demo: tool-timeline-item-neutral
A transparent surface with a default border.
Loading demo: tool-timeline-item-outline
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'brand' | 'neutral' | 'outline' | 'neutral' | optional |
state | 'started' | 'running' | 'completed' | 'started' | optional |
title | ReactNode | — | required |
description | ReactNode | — | optional |
timestamp | ReactNode | — | optional |
icon | string | — | optional |
showConnector | boolean | true | optional |
dir | 'ltr' | 'rtl' | 'ltr' | optional |
as | ElementType | 'div' | optional |