Vertical Status Pipeline
A Vertical Status Pipeline displays the stages of a process in a top-to-bottom sequence, helping users track progress, understand the current stage
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features5 checks
- Uses ordered list semantics to convey step sequence
- Color contrast ratios meet 3:1 for status indicators (WCAG 1.4.11)
- Does not rely on color alone to indicate step status
- Current step is identified with aria-current="step"
- Completed and pending steps are clearly distinguishable
When to use this component
✓Do's
- •A process moves through fixed, ordered stages the user should be able to see
- •Each stage needs a label, a description, or a timestamp beside it
- •The stage names are long enough that a horizontal row would crowd or truncate
- •The layout is narrow, such as a sidebar, a mobile view, or a status panel
✗Don'ts
- •The space is wide and the labels are short, use Horizontal Status Pipeline
- •The user is actively moving through a form, use Stepper which is interactive
- •The events are a dated history rather than fixed stages, use Journey Timeline
- •Progress is continuous rather than staged, use Progress Indicators
Do's and Don'ts
Submitted
Completed
Received 14 July, 10:24 AM.
- 2
Under review
In progress
Usually 3 to 5 working days.
- 3
Certificate issued
Not started
Say what each stage means and how long the current one takes. Waiting is easier when the user knows what they are waiting for.
Stage 1
Completed
- 2
Stage 2
In progress
- 3
Stage 3
Not started
Don't label stages by number alone. "Stage 2" tells the user nothing about what is happening or what comes next.
Submitted
Completed
Verification
Needs attention
Address proof unreadable. Upload a clearer copy.
- 3
Approval
Not started
When a stage is blocked, mark it and name the action that unblocks it, so the user can act without contacting support.
Submitted
Completed
Verified
Completed
Reviewed
Completed
Approved
Completed
Issued
Completed
Dispatched
Completed
Delivered
Completed
Don't mark every stage complete with no current stage. Users cannot tell where they are or whether anything remains.