For Designer

Components/Navigation

Stepper

Steppers break a long task into steps and show people what’s done, where they are and what’s left

Variants
84
Indicators
4
Layouts
6

Playground

Pick a layout and indicator, then step through with Back and Next, or click a finished step to go back to it

  2. 02Step 02CompanyIn progress
  3. 03Step 03PaymentPending
  4. 04Step 04ReviewPending

Stepper-horizontal · Type=01 · Size=Large · Step=Filled · Rounded=true · Step 2 of 4

Indicators

Step-variant marks each step Default, Active or Finish. Filled reads best at a glance, Stroke is lighter, the shapes drop the number for short flows

Filled0102
Stroke0102
Shape-01
Shape-02

Layouts

Horizontal steppers sit above a form or page. Vertical ones fit side panels and long setups where each step needs room

Horizontal 01 · bar after
  1. Step 01Account
  2. 02Step 02Company
  3. 03Step 03Payment
  4. 04Step 04Review
Horizontal 02 · inline
  1. Step 01Account
  2. 02Step 02Company
  3. 03Step 03Payment
  4. 04Step 04Review
Horizontal 03 · centered
  1. Step 01Account
  2. 02Step 02Company
  3. 03Step 03Payment
  4. 04Step 04Review
Horizontal 04 · top bar
  1. Step 01Account
  2. 02Step 02Company
  3. 03Step 03Payment
  4. 04Step 04Review
Vertical 01 · line
  1. Step 01Account
  2. 02Step 02Company
  3. 03Step 03Payment
Vertical 02 · card
  1. Step 01Account
  2. 02Step 02Company
  3. 03Step 03Payment

Sizes

Large for full page flows, Small for dialogs and side panels

40Large
  1. Step 01Account
  2. 02Step 02Company
  3. 03Step 03Payment
32Small
  1. Step 01Account
  2. 02Step 02Company
  3. 03Step 03Payment

When to use

Use when

  1. A task has three to six steps that happen in a fixed order
  2. People benefit from knowing how much is left, like onboarding or checkout
  3. Each step is a screen or panel of its own, with a Back and Next

Avoid when

  1. People can do the parts in any order, use a Tab Menu
  2. There are only two steps, a page title and a button are enough
  3. You show how far a single upload or process has gone, use a Progress Bar

Do and don’t

  1. Step 01Account
  2. 02Step 02Company
Do

Name each step with a short noun, so people know what’s coming before they get there

  1. Step 01Step
  2. 02Step 02Step
Don’t

Don’t leave every step unnamed, numbers alone don’t say what’s next

Tokens and specs

PropertyTokenValue
Indicator size—40 / 32 px
Indicator radius999 px, 12 / 8 px when not rounded
Number—Inter Medium 16/24, 14/20 at Small
Default#D1D1D1
Active#335CFF
Finish#1FC16B
Stroke, default number#A3A3A3
Check icon24 / 20 px, 2 px stroke
Shape-01 dot—24 / 20 px
Shape-02 dot16 / 12 px
Bar track#EBEBEB, 2 px, 4 px for type 04
LabelInter Regular 12/16, 10/12 at Small
Step nameInter Medium 14/20, 12/16 at Small
Step name, default#5C5C5C
BadgeInter Medium 10/12, brand/core/base text
Indicator to text12 px
Vertical 02, active card16 padding, 16 radius
Esc