Progress Tracker

The Progress Tracker guides users through multi-step workflows, showing completed, current, and incomplete steps, helping them stay oriented across multiple screens.

Stable
Show details
Stable
Published: January 09, 2025
Updated: May 22, 2025

Anatomy

component-anatomy-01
  1. ‘Complete’ Progress Tracker Step: Visual representation of a completed step.
  2. ‘Current’ Progress Tracker Step: Visual representation of an active step.
  3. ‘Incomplete’ Progress Tracker Step: Visual representation of an incomplete step.
  4. ‘Dismiss’ Button (optional): Allows the user to dismiss the Progress Tracker. It is visible when the Progress Tracker is shown on a page, but not visible when shown in a dialog. See Best Practices.

Variants

Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.

Progress Tracker

ProgressTracker
ProgressTracker

In a dialog

The ‘Show Dismiss’ property is false when the Progress Tracker is shown in a dialog.

component-option-01

On a page

The ‘Show Dismiss’ property is true when the Progress Tracker is shown on a page.

component-option-02

Progress Tracker Step

The steps embedded in the Progress Tracker.

ProgressTrackerStep
ProgressTrackerStep
state complete
ProgressTrackerStep
ProgressTrackerStep
state current
ProgressTrackerStep
ProgressTrackerStep
state current & hover
ProgressTrackerStep
ProgressTrackerStep
state incomplete

Component dependencies

This component is internally dependent on the following components:


Help and support