Steppers show users where they are in a multi-step verification flow. Each segment is in one of three states: done, active, or pending. Prizma steppers support 3 to 5 steps.
Anatomy
Track segments fill with brand blue as steps complete; inactive segments stay light gray. Both colors are static tokens — they don’t change with the theme.
Tokens
TokenRoleLayer
--stepper-bar-doneCompleted segment colorComponent--stepper-bar-activeCurrent segment colorComponent--stepper-bar-pendingUpcoming segment colorComponent--stepper-bar-heightTrack bar heightComponent--stepper-gapGap between barsComponent--radius-stepperBar corner radiusSemanticComponent tokens
The color tokens for this component live in Color → Tokens, and its spacing, radius, and type map to the shared foundation scales.