Progress Bar

Segmented Progress Bar

Step-based progress built from discrete atoms (h:4px, border-radius:2px, gap:4px). Completed segments are solid violet (#892CDC), the current/active segment is light violet (#D7A3FF), and upcoming segments are off-white (#F9F9F9).

V 1.0View in Storybook
Controls
Steps
4
Active Step
2

Variants

Active stepper states (4 steps)Exact Figma active stepper states — stepper=0 through stepper=4
None active
Active = 0
Active = 1
Active = 2
Active = 3
Active = 4
Individual atom statesThe three distinct segment colours from Figma
Completed#892CDC
Active#D7A3FF
Inactive#F9F9F9
Different step counts
2 steps
3 steps
4 steps
5 steps
6 steps

Props

Name
Type
Default
steps*
number
—
activeStep*
number
—
aria-label
string
'Step progress'

Code

import { SegmentedProgressBar } from '@/src/components/Progress/Progress'

// 4 steps, currently on step 2 (0-based index)
// step 0 → completed  (#892CDC)
// step 1 → completed  (#892CDC)
// step 2 → active     (#D7A3FF)
// step 3 → inactive   (#F9F9F9)
<SegmentedProgressBar steps={4} activeStep={2} />

// All inactive (not started)
<SegmentedProgressBar steps={4} activeStep={-1} />

// All complete
<SegmentedProgressBar steps={4} activeStep={4} />

Usage guidelines

When to use
  • Use when progress can be divided into a known, fixed number of steps.
  • Ideal for cart/checkout flows, onboarding sequences, or multi-step forms.
  • Use when users benefit from seeing at a glance how many steps remain.
  • Combine with a step counter label ("Step 2 of 4") above the bar for clarity.
When not to use
  • Don't use for continuous progress (file upload %, scores) — use the Linear bar instead.
  • Don't use more than 8 segments; atoms become too narrow and hard to differentiate.
  • Don't use when steps are not equal in weight or time — it implies equal effort per segment.
  • Avoid using without any adjacent label to orient the user.