Progress Tracker

Progress trackers display the user’s location within a multistep process while providing the status of each step.

Status

PublishedElement can be used in production
PublishedElement can be used in production
Angular
Angular
In backlogElement is in backlog
React
React
In backlogElement is in backlog
Documentation
PublishedElement can be used in production

What's new

Progress tracker was previously named “Standard User Progress Tracker” and was featured in the “User Progress Trackers” section of DDS v1. This component has been visually redesigned to include status circles and labels. Additionally, it includes updates to the font ramp and color palette, as well as accessibility enhancements.

When to use

ComponentUse case
Progress trackerProgress trackers provide the status of each step within a multistep process and give visibility on the length of the overall sequence.
PaginationPagination divides a collection of data or other content types such as images, cards, or search results into multiple pages showing a fixed number of items per page.
Progress barProgress indicator provides visual or quantitative feedback to users regarding how long a system will take to complete a system process. This component is not intended for use during loading or submission events under five seconds.

Anatomy

The progress tracker component is made of 4 elements:

  1. Label: short descriptive text describing the step.
  2. Status indicator: shows whether the step is in progress or completed, active or inactive.
  3. Connecting track: flexible space between status indicators. The track will fill to connect completed and in progress steps to each other.
  4. Summary text (optional): used to provide additional context.

Articles

Status trackers and progress updates

Read the Nielsen Norman Group's article on progress tracker guidelines.

Designing for long waits and interruptions

Read the Nielsen Norman Group's article on progress bar.