Dot Stepper
A row of dots that shows how many steps there are and which one you are on, with buttons to go back and forward. For short, linear sequences like onboarding.
Preview
Welcome aboard
A short tour of the four things you will use every day.
Step 1 of 5
When to use
- For three to seven steps that are read in order: an onboarding tour, a carousel of tips, a short setup.
- When the position matters more than the names of the steps.
Reach for something else
- For a form where each step has a name people need to see: use a labelled stepper.
- For many pages of results: that is Pagination.
Anatomy
- 1
Previous button
Goes back one step; disabled on the first.
- 2
Dots
One per step. The active dot stretches into a short pill in brand ink.
- 3
Next button
Goes forward one step; on the last step it becomes the finishing action, such as Done.
- 4
Step label
Optional text such as Step 2 of 5, for when the dots alone are too quiet.
States
First step
Previous is disabled.
Middle step
Both buttons active; the active dot elongates.
Last step
Next becomes the finishing action.
Dot hover
Where dots are clickable, the dot under the pointer darkens.
Focus
A ring around the focused button or dot.
Accessibility
- Previous and Next are native <button> elements with clear labels, and disabled at the ends.
- Clickable dots are buttons with an aria-label such as "Go to step 3"; the active one carries aria-current="step".
- A visually hidden live region announces "Step 2 of 5" when the step changes.
- Decorative, non-clickable dots are aria-hidden, and the step label carries the position instead.
Source
The Dot Stepper is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
See it in a block