---
title: "Stepper"
url: "https://developer.incode.com/design-and-ux/stepper/"
section: "design-and-ux"
group: "Prizma Design Foundations / Components"
version: "v1.1"
status: "live"
---
# Stepper

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.

<div class="dh-rule"><span>Anatomy</span><i></i></div>

<div class="dh-stage"><span class="dh-pz-stepper"><i class="is-active"></i><i class="is-active"></i><i></i><i></i></span></div>

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.

<div class="dh-rule"><span>Tokens</span><i></i></div>

```dh-comp-tokens
--stepper-bar-done | Completed segment color | Component
--stepper-bar-active | Current segment color | Component
--stepper-bar-pending | Upcoming segment color | Component
--stepper-bar-height | Track bar height | Component
--stepper-gap | Gap between bars | Component
--radius-stepper | Bar corner radius | Semantic
```

> 📘 Component tokens
>
> The color tokens for this component live in [Color → Tokens](/design-and-ux/color/), and its spacing, radius, and type map to the shared foundation scales.