Design Spec
Completed
Editing
Linked Steps
Steps can optionally be used as a navigation piece. They should not be used as the only means of getting to individual steps.
Since most flows using a Progress Tracker don’t allow users to jump to later steps, future steps generally won’t have links.
Disabled
Disabled with linked steps
No label Steps
When individual steps are missing, we recommend adding an overall step, customizable to fit the needs of the page.
Example with centered text
Step Count
Progress Trackers can exceed 6+ steps, but is recommended to drop labels beyond this point.
Small Variation
A smaller Progress Tracker also exists, which lacks individual labels. This is useful on smaller display scenarios. It can also be used in more compact areas such as in a Modal. By default, text labels are not displayed when the screen size is below a tablet size (768px).
Smaller Display Handling
Progress Trackers, when being shrunk, will first prioritize shrinking the dividers. With no space left, text labels will wrap.
Best Practices
- If a task needs more than 6 steps, consider simplifying the process, breaking it up into multiple tasks, or use hidden labels.
- Use labels that clearly indicate the purpose of the step. Progress Trackers with hidden labels should still be given labels, visible through Tooltips.
- Keep labels to a single line of text, be short and concise (1-2 words).
- Never have 2 active steps at once. This includes not having an "editing" and an "active" step at the same time.
Related Components
- To indicate the progress of an action without defined user-facing steps, use the Progress Bar component
- Takeover is often used as a container of the Progress Tracker and its content. Example of complex use case
Importing
import { ProgressTracker } from '@servicetitan/design-system';