Anatomy
- ‘Complete’ Progress Tracker Step: Visual representation of a completed step.
- ‘Current’ Progress Tracker Step: Visual representation of an active step.
- ‘Incomplete’ Progress Tracker Step: Visual representation of an incomplete step.
- ‘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
| Property | Values | Default |
|---|---|---|
| Show Dismiss Boolean | true | false | false |
In a dialog
The ‘Show Dismiss’ property is false when the Progress Tracker is shown in a dialog.
On a page
The ‘Show Dismiss’ property is true when the Progress Tracker is shown on a page.
Progress Tracker Step
The steps embedded in the Progress Tracker.
| Property | Values | Default |
|---|---|---|
| State Variant | current | incomplete | complete | current & hover | incomplete |
| Label Text | string | Label |
Component dependencies
This component is internally dependent on the following components:
Help and support