Skip to content
Pinky UI

feedback

Status Pipeline

A queued-to-active-to-complete status path keeps failure and retry on the same spatial track.

  • feedback
  • status
  • pipeline
  • progress

Live preview

Queued is active

Quick usage

usage
import { StatusPipeline } from "@pinky-ui/systems";

<StatusPipeline stages={stages} failedId={failedId} onRetry={retry} />

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Every stage exposes its named state and the current stage uses aria-current.
  • Failure, retry and completion are written as text as well as shown through color and symbols.

Performance

  • A small fixed stage list updates on explicit actions without timers or continuous work.

Reduced motion

Keeps the complete status track and swaps state immediately without animated travel.

When to use

  • Operational flows where queued, active, failed and completed states need spatial continuity.

When not to use

  • A single indeterminate task or decorative percentage meter.

Skill

Purpose

A queued-to-active-to-complete status path keeps failure and retry on the same spatial track, instead of replacing the track with an error state.

Good for

  • Operational flows where queued, active, failed and completed states need spatial continuity

Avoid for

  • A single indeterminate task or decorative percentage meter

Usage

tsx
<StatusPipeline stages={stages} failedId={failedId} onRetry={retry} />

Accessibility

  • Every stage exposes its named state and the current stage uses aria-current.
  • Failure, retry and completion are written as text as well as shown through colour and symbols.

Performance

  • A small fixed stage list updates on explicit actions without timers or continuous work.

Related: multi-step-progress, status-pill.

Open this skill on its own page