Progress Bar

Stepper Progress Bar

Horizontal step indicator with icon nodes (number, check, warning, radio) connected by solid green lines (completed) or dashed grey lines (pending). Each step shows a label below the icon. Supports 3–5 steps.

V 1.0View in Storybook
Controls
Step Count
Active Step
1
Active Icon
Cart
Address
Payment
Review

Variants

All step statesInactive (grey check), Active-Number (green #), Completed (green check), Error (red !), Active-Radio

Step 1 active — number icon

Cart
Address
Payment
Review

Step 2 active — number icon

Cart
Address
Payment
Review

Step 2 active — radio icon

Cart
Address
Payment
Review

Step 3 with error

Cart
Address
Payment
Review

All completed

Cart
Address
Payment
Review
3-step flow
Address
Payment
Review
5-step flow
Account
Address
Delivery
Payment
Review

Props

Name
Type
Default
steps*
StepItem[]
—
className
string
''

Code

import { StepperProgressBar } from '@/src/components/Progress/Progress'
import type { StepItem } from '@/src/components/Progress/Progress'

const steps: StepItem[] = [
  { label: 'Cart',    state: 'completed'     },
  { label: 'Address', state: 'active-number' },  // current step
  { label: 'Payment', state: 'inactive'      },
  { label: 'Review',  state: 'inactive'      },
]

<StepperProgressBar steps={steps} />

// Step states:
// 'inactive'      — grey check circle (not yet reached)
// 'active-number' — green number badge (current step, number icon)
// 'active-radio'  — green radio button (current step, radio icon)
// 'completed'     — green check circle (done)
// 'error'         — red warning icon (action required)

Usage guidelines

When to use
  • Use for multi-step flows where each step has a distinct name — checkout, onboarding, registration.
  • Use the number icon variant when the sequence order is important to communicate.
  • Use the radio icon variant for selection-style steps (e.g. choosing a delivery slot).
  • Use the error state to flag a step requiring user attention without blocking navigation.
  • Ideal for 3–5 step flows; beyond 5, consider a vertical stepper or progress bar.
When not to use
  • Don't use for progress that isn't step-based — use Linear or Segmented instead.
  • Don't mix number and radio icon styles within the same stepper instance.
  • Don't skip steps visually — each step between the start and active step should be 'completed'.
  • Don't use more than 5 steps horizontally; labels will truncate and become unreadable on mobile.
  • Avoid using the error state on future/inactive steps — errors should only apply to visited steps.