Progress Tracker

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

Status

Figma UI Kit	PublishedElement can be used in production
Vanilla	PublishedElement can be used in production
Angular	In backlogElement is in backlog
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

Component	Use case
Progress tracker	Progress trackers provide the status of each step within a multistep process and give visibility on the length of the overall sequence.
Pagination	Pagination 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 bar	Progress 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:

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

Articles

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

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

Usage

Multistep processes

Progress tracker uses links to provide navigation throughout a process, such as a form, in addition to conveying status. Refer to the link component page for more information on how to use links. Though validation is not part of the progress tracker component, remember to provide users with feedback as they move forward through each step.

Sizes

The progress tracker component is available in two sizes.

Size	Use case
Large	This default size can be used in most cases, as long as you can maintain visual balance.
Small	Recommended for compact spaces, including mobile, or in place of the large size when the amount of steps may cause the tracker to break to a new line.

Layout

Alignment

Horizontal

When choosing an alignment for the horizontal progress tracker, consider your viewport and grid. Generally, it’s recommended to left-align the progress tracker for readability. However, horizontal alignment is largely up to the designer’s discretion as long as the component is kept to one line and within the viewport (does not require scrolling).

Place the component at the top of your page, preceding any content that is included in the tracked process.

Vertical

Vertical progress trackers can be placed to the right or left of on-page content. It is recommended to use the vertical layout for mobile experiences in order to prevent horizontal scrolling and to improve readability. In mobile experiences, place the tracker at the beginning of each step.

Interaction

Behavior and states

Regarding interaction, progress tracker labels contains states available to standalone links, including rest, hover, pressed, focused, and inactive. Additionally, as the component is meant to show the state of progress in a UI, both completed and incomplete states are available.

State	Behavior
Rest	When a user has not interacted with the label, it will appear in its default, rest state.
Hover	When a user hovers their cursor over the label’s active area, the label is underlined and deepens in color, indicating that it is able to be pressed.
Press	When a user presses the label, the text is underlined and deepens in color once again.
Inactive	Inactive labels are displayed with 40% opacity, indicating the option exists but is not yet available to the user.
Focus	A blue outline appears around a label when a user tabs or uses keyboard controls to navigate. Focus states do not appear on inactive labels.

Completed versus incomplete

Completed steps are indicated by a filled status indicator with checkmark icon. Incomplete steps are shown without fill. Once steps are completed, the step in the progress tracker component becomes actionable to allow users to easily navigate to previous steps in the process. Incomplete steps are not typically actionable until its previous steps are completed. If you are considering allowing forward navigation without requiring completion, consider first reordering your process to follow logical forward progression.

Standards

Accessibility

Make sure all links are unique and descriptive
Don’t use the word “link” in the text, since screen readers will announce it as a link anyway. Each link should accurately describe its purpose. While different links should have unique text, links to the same destination used across pages are an exception and should always use the same link text if possible.
WCAG 2.1: 2.4.4 Link Purpose (In context), 3.2.4 Consistent Identification

Make sure there is sufficient space for a user to press
If the links are the small variant (12 pixels) or have a custom type style applied, ensure they have a minimum 24 pixel line-height.
WCAG 2.1: 2.5.8 Target Size (Minimum)

Images of text in links should be avoided; use actual text instead
Screen readers can’t read text that’s embedded in an image, so images containing text should not be used unless deemed absolutely necessary and supported with equivalent accessible text.
Exception: Logos are considered exempt (but still require an accessible text alternative).
WCAG 2.1: 1.4.5 Images of Text

Content

Label length
Be concise while accurately describing the steps that each label represents within the process.

Capitalization
Use sentence case. Only capitalize the first letter of every word for proper nouns, document titles, or product names.
Do: Work history
Don’t: WORK HISTORY

Punctuation
Punctuation is not required for progress tracker labels or optional summary text.

Live demo

This demo lets you interact with the component and view the code. To see other interactive examples of this component or for additional developer documentation, visit Storybook.

You are now entering a live demo of the component.

<ol class="dds__progress-tracker">
  <li class="dds__progress-tracker__item dds__progress-tracker--complete">
    <span class="dds__sr-only">complete</span>
    <span class="dds__progress-tracker__circle">
      <span class="dds__progress-tracker__icon"></span>
    </span>
    <div class="dds__progress-tracker__content">
      <a href="#">Step name</a>
      <span>Summary text</span>
    </div>
  </li>
  <li class="dds__progress-tracker__item dds__progress-tracker--complete">
    <span class="dds__sr-only">complete</span>
    <span class="dds__progress-tracker__circle">
      <span class="dds__progress-tracker__icon"></span>
    </span>
    <div class="dds__progress-tracker__content">
      <a href="#">Step name</a>
      <span>Summary text</span>
    </div>
  </li>
  <li class="dds__progress-tracker__item dds__progress-tracker--in-progress" aria-current="true">
    <span class="dds__progress-tracker__circle">
      <span class="dds__progress-tracker__icon"></span>
    </span>
    <div class="dds__progress-tracker__content">
      <span class="dds__progress-tracker__step-name">Step name</span>
      <span>Summary text</span>
    </div>
  </li>
  <li class="dds__progress-tracker__item">
    <span class="dds__sr-only">inactive</span>
    <span class="dds__progress-tracker__circle">
      <span class="dds__progress-tracker__icon"></span>
    </span>
    <div class="dds__progress-tracker__content">
      <span class="dds__progress-tracker__step-name">Step name</span>
      <span>Summary text</span>
    </div>
  </li>
  <li class="dds__progress-tracker__item dds__progress-tracker--active">
    <span class="dds__sr-only">active</span>
    <span class="dds__progress-tracker__circle">
      <span class="dds__progress-tracker__icon"></span>
    </span>
    <div class="dds__progress-tracker__content">
      <a href="#">Step name</a>
      <span>Summary text</span>
    </div>
  </li>
</ol>

Copy code

View the progress tracker demo and code in Vanilla.

Progress Tracker

Status

Contents

What's new

When to use

Anatomy

Articles

Status trackers and progress updates

Designing for long waits and interruptions

Contents

Contents

Usage

Multistep processes

Sizes

Layout

Alignment

Horizontal

Vertical

Interaction

Behavior and states

Completed versus incomplete

Standards

Accessibility

Content

Contents

Contents

Live demo

You are now entering a live demo of the component.

Vanilla

Contents

Progress Tracker

Status

Contents

What's newCopy link to this section

When to useCopy link to this section

AnatomyCopy link to this section

ArticlesCopy link to this section

Status trackers and progress updates

Designing for long waits and interruptions

Contents

Vanilla

What's new

When to use

Anatomy

Articles