Progress tracker
A progress tracker conveys progress through linear steps or actions across multiple screens, in order to complete a task. The tracker shows users where they are in the process, and can be used to navigate through the process by selecting steps.
Best Practices
Progress trackers should:
- Use labels that clearly indicate the purpose of the step. When writing, keep options to a single line of text, be short and concise, ideally 1-2 words.
- If a task needs more than six steps, consider simplifying the process or breaking it up into multiple tasks
- If there are less than three steps, consider showing the steps on a single screen
Examples
Horizontal progress tracker
Vertical progress tracker
Navigating through steps
Non-linear steps, or complex multi-step flows can be supported, allowing the user to enter or revist any prior step in the flow.
Each step passed to the steps prop allows an optional href, or onClick handler to be provided, making each step label a clickable link to navigate through multi-step flows.
In order to support client-side routing implementations, each step also supports an optional as property, accepting a Link component such as react-router's Link. The any additional props on each step will also be forwarded to the link component.
Browser support
The Progress Tracker component internally uses Array.prototype.findIndex() and may require a polyfill to provide browser support depending on the specific requirements for your application. We recommend using Polyfill.io in your application to apply necessary polyfills only when they are needed for the requesting browser.