ComponentsFeedback

Status

Shows where a task, run, or step stands: pending, running, paused, succeeded, warning, failed, stopped, or skipped. Running fills eight segments as a known amount grows, or spins like Spinner when the amount is unknown. For a page-level wait, use Progress or Spinner.

States

Eight states, and running with or without a known amount. Hover a mark to replay it. Each size matches Spinner: 12, 16, and 20px.

PendingQueued, not started
RunningAmount unknown
Running, 40%Amount known
PausedWaiting to resume
SucceededFinished
WarningFinished with issues
FailedNeeds attention
StoppedCancelled by someone
SkippedDid not need to run

Change state

The mark animates in again whenever its state changes. A changing amount only fills the next segment.

Deploy run

Each step’s mark follows the run: pending, running with or without an amount, then its result. Stop the run to see stopped and skipped.

Ready to deploy

Install dependenciesQueued
Build web appQueued
Run 1,284 testsQueued
Migrate databaseQueued
Deploy to productionQueued

Usage

import { Status } from "@tulipfarm/sprout/status";

<Status state="pending" />
<Status state="running" />
<Status state="running" value={40} />
<Status state="success" />
<Status state="error" size="lg" />

state: pending (default), running, paused,success, warning, error, stopped, or skipped.
value: for running, a number from 0 to 100 fills a ring of eight green segments, one per 12.5%, and the segment being worked on fades in and out. Leave it out (or pass null) while the amount is unknown, and a blue line runs around the ring at the same speed as Spinner.
size: sm (12px), md (16px, default), or lg (20px).

The root gets data-state, data-size, and data-determinate while a running amount is known.

Motion

The mark scales in over 280ms when it mounts, and again whenever its state changes; the check, cross, or bar then draws in. A changing amount only fills the next segment, over 180ms. On hover with a mouse, the mark grows a little and its glyph draws again. With reduced motion, the mark only fades in, the line rests at the top, and the active segment stays half lit instead of fading.

Accessibility

Status is an img named after its state, such as “Succeeded” or “Running, 40%”. Pass aria-label to name it yourself, or aria-hidden="true" when text beside it already says the state. It is not a live region; put a role="status" summary nearby when a change should be announced. Color is never the only signal: each state has its own shape.

Theme tokens

Running uses --sprout-info, a known amount and success --sprout-success, warning --sprout-warning, and error --sprout-danger. Pending, paused, stopped, and skipped use --sprout-muted. Glyphs on a filled circle use --sprout-surface. In forced colors, the mark uses CanvasText, and running uses Highlight.