components icon

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
Adobe XD
Adobe XD Kit
In backlogElement is in backlog
PublishedElement can be used in production
Web Components
In backlogElement is in backlog
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.

Anatomy

The four parts of the progress tracker component.

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.