Back to Components

Progress tracker

Overview

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

Code example
Playroom
Check in at restaurant

Vertical progress tracker

Code example
Playroom
Catering Menu

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.

Code example
Playroom
Catering Menu

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.