Progress tracker
A progress tracker displays the steps and progress through a journey.
When to use
- A journey whose steps have names worth showing, such as a checkout or a multi page form.
- A journey someone may leave and come back to, where seeing which steps are done is the point.
- Three to six named steps. Past that the labels stop fitting and the tracker stops being readable.
When not to use
- Steps with no names. That is a progress indicator, which is dots.
- Work that is running rather than stepped. That is a progress bar.
- A single step, which is not a journey.
Guidance
Do
- Details
- Payment
- Confirm
Mark exactly one stage as current. It is the only thing telling a reader where they stand.
Don't
- Enter your billing details
- Choose a payment method
- Review and confirm your order
Do not write sentences as labels. They crowd each other, and the tracker is a map rather than the instructions.
Intensity
What each of this component's grounds spends, measured against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| progress-tracker | brand-bold | 0.460Marked | 0.598Marked |
| progress-tracker | neutral | 0.042Ambient | 0.066Substrate |
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.
- One or two words per stage. Payment, not Choose a payment method.
- Nouns, not verbs. The stage is a place, not an instruction.
- Keep the labels parallel. If one is a noun they should all be nouns.