Status Line
A slim inline status — info, progress or error — with an optional inline action, for one record's processing state.
- Status
- Since
0.23.10- Accessibility pattern
- role=status, role=alert for errors
Last updated
Transcribing… updates on its own
Notes were edited, so they are not regenerated automatically.
Transcription failed: the recording has no audio.
Install
Add Status Line from the VegaStack registry. The CLI verifies the item's integrity hash before writing it.
pnpm dlx shadcn@latest add @vegastack/status-lineThe same command installs the registry items it composes: @vegastack/spinner.
Usage
import { StatusLine } from "@/components/ui/status-line";
<StatusLine status="progress">Transcribing… updates on its own</StatusLine>;
<StatusLine
status="error"
action={
<Button size="xs" variant="outline" onClick={retry}>
Retry
</Button>
}
>
Transcription failed: {reason}
</StatusLine>;Anatomy
StatusLine — data-slot="status-line" | "status-line-action"
Examples
Progress, info and error
progress shows a spinner, info an info icon, and error an alert icon with the whole line in
the destructive ink. Actions sit inline after the text. There is no box and no border — the line
reads as part of the header it sits in. Show one status line per record: fold a secondary notice
into the same line rather than stacking a second one.
Transcribing… updates on its own
Notes were edited, so they are not regenerated automatically.
Transcription failed: the recording has no audio.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
action | React.ReactNode | — | Inline actions after the text — a small Button such as Retry. |
icon | React.ReactNode | — | Replaces the status icon. |
status | StatusLineStatus | "info" | progress shows a spinner ("Transcribing…"), info an info icon, and error an alert icon
with the text in the destructive ink. error is role="alert"; the others are
role="status". |
Data attributes and CSS variables on StatusLine
| Attribute | Values |
|---|---|
data-slot | "status-line" | "status-line-action" |
data-status | mirrors a prop or state value |
Accessibility
progressandinfoarerole="status"(polite);errorisrole="alert", so a failure that appears while the reader is on the page is announced once.- Icons are decorative; the text says what is happening and why.
- Actions are ordinary buttons after the text, in the tab order.
| Contract | States tested |
|---|---|
| Behaviour | info, progress, error |
| Accessibility | labeled |
| Visual | info, progress, error |
Do / Don't
Do
Use StatusLine for a record's own processing state inside its header, with the reason and the one or two actions that fix it.
Don't
Use it for a page-level message with a title (Alert) or a transient confirmation (Toast).