Progress tracker

ECT approvedUpdated May 21, 2026

Description

Displays the progress of a process.
Indicates that a task is still in progress, or data is still loading, and the user should wait for it to finish.
Can show the remaining value from a forecasted maximum value.

Warning

Choosing the right component For long-running or non-linear work that can span pages or sessions, use Progress tracker. For example, onboarding or setup flows For simple on-page checklists, use Step sequence. Shows what’s done and what’s left Ideal for 3 to 5 lightweight actions on a single screen For gating or step-by-step validation, use Step flow wizard. A guided, linear, end-to-end journey completed in one go Ideal for forms

Anatomy

Anatomy

Size

The progress tracker width is customisable.
There are 3 progress tracker heights: S, M and L sizes.

Variations

Bar visibility

With bar

Without bar

Label visibility

All labels

Current label

Current and maximum labels

Current label and descriptive text

Label position

Bottom (default)

Top

Status

Neutral

Negative

Caution

Positive

Information

Dos and don'ts

Don't

Technical example

Progress tracker component implemented in Carbon.

Requirements

Users should be able to:

Understand their progress though a process, and where they are in the process.
Understand an overview of the step that they are currently on.
Anticipate how many steps have been completed and how many remain.

Interactions

Progress trackers are non-interactive and do not require user input.

Design considerations

Users should be able to understand both visually, and in text where they are in a process, and anticipate how much of the process remains.
Step labels should always be used.
The progress bar should not be used without the text label.
Make sure 3:1 minimum contrast ratio is used between the progress bar and the background it's placed against.

Development considerations

Make sure there is no duplication of content between the progress bar and the step text.
Use aria-hidden=”true” on the progress bar, so that it is only present on screen for sighted users.

Date	Changes
October 2023	Removed Generic status.Added Choosing the right component.Added bar visibility example to Variations.
August 2025	Updated guidance on the accessibility tab.
31 July 2025	Updated the Annotation and added Do following the introduction of an optional prop for the progress bar, enabling a text-only variant without the visual bar.
September 2024	New version created. Previous versions archived in the frozen Web and Product design system.