Progress indicator
A progress indicator shows the user where they are along the steps of a journey.
When to use
- A short journey of three to six steps, such as onboarding or a setup flow.
- A carousel or a paged panel, where the dots stand for the panels.
- Anywhere the steps have no names worth showing.
When not to use
- A journey longer than about six steps. The dots stop being countable and the indicator stops saying where you are.
- Work that is running rather than stepped. A progress bar carries that, because it can show a fraction.
- Steps that need names, numbers or a state such as failed. That is a progress tracker.
Guidance
Do
Keep the count low enough to read at a glance, and name the group for the journey it belongs to.
Don't
Do not use dots for a long journey. Nobody counts twelve dots, so the indicator stops saying where you are.
Intensity
What each of this component's grounds spends, measured 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, and Demanded is declared and rationed, so neither is a property this component carries by itself. See intensity.
Content
What to write, and what to leave out.
- Name the journey, 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.