Progress indicator
A progress indicator shows users which step they are on.
When to use
- A short flow of three to six steps, such as onboarding or setup.
- A carousel or a paged panel, where the dots stand for the panels.
- Steps that do not need names.
When not to use
- More than about six steps. People cannot count the dots, so they cannot tell where they are.
- A task in progress rather than a set of steps. Use a progress bar, which can show how much is done.
- Steps that need names, numbers or a state such as failed. That is a progress tracker.
Guidance
Do
Keep the number of dots small enough to count at a glance, and use a label that names the flow.
Don't
Do not use dots for a long flow. Nobody counts twelve dots, so people cannot tell where they are.
Intensity
How much attention each of this component's grounds uses, scored against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| progress-indicator | brand-bold | 0.460Marked | 0.598Marked |
| progress-indicator | neutral-strong | 0.113Ambient | 0.129Ambient |
Substrate, Ambient and Marked are measured. Directed depends on what else is in the region. Demanded is declared, and its use is limited. So neither of those two depends on the component alone. See intensity.
Content
What to write, and what to leave out.
- Name the flow, not the control. Onboarding steps, not Progress indicator.
- Keep it to two or three words.
- Do not number the group. Each dot already announces its own position.