Progress stepper
On this page
Importing
Add rh-progress-stepper to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-progress-stepper/rh-progress-stepper.js';
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
To learn more about installing RHDS elements on your site using an import map read our getting started docs.
Usage
<rh-progress-stepper>
<rh-progress-step state="complete"
description="This step has been completed successfully">
Complete Step
</rh-progress-step>
<rh-progress-step state="warn"
description="This step has a warning that needs attention">
Warning Step
</rh-progress-step>
<rh-progress-step state="fail"
description="This step has failed and needs to be retried">
Failed Step
</rh-progress-step>
<rh-progress-step state="active"
description="Currently working on this step">
Active Step
</rh-progress-step>
<rh-progress-step description="This step is not yet started">
Inactive Step
</rh-progress-step>
</rh-progress-stepper>
<script type="module">
import '@rhds/elements/rh-progress-stepper/rh-progress-stepper.js';
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
rh-progress-stepper
A progress stepper conveys the steps necessary to complete a process or task, and the status of each step. Steps have titles and descriptions; and each step can be in one of a number of possible states:
- inactive (yet to be performed)
- active (currently being performed)
- warn (succeeded, but with warnings)
- fail (failed to occur)
Or a custom state, set using the
icon
attribute.
Usage guidelines
- Use 3-5 steps maximum to reduce cognitive load
- Designed to complement standard previous/next navigation. Avoid using as the only navigation.
- When process is completed, users cannot go back and must start over
Accessibility
- Communicates list structure and step states to screen readers
- Supports keyboard navigation for linked step titles
- Maintains logical focus order (left to right, top to bottom)
- Provides aria-current for the active step
Slot Name | Summary | Description |
---|---|---|
|
Use this slot for |
Attribute | DOM Property | Description | Type | Default |
---|---|---|---|---|
vertical-at |
verticalAt |
Makes the element Use when horizontal space becomes limited. The element automatically changes to vertical orientation at screen sizes of <768px. |
|
|
orientation |
orientation |
Sets the orientation of the progress stepper.
Responsive behavior
Use vertical orientation when horizontal space is limited or when you need to display more detailed step information. |
|
|
compact |
compact |
Makes element display as Usage guidelines
|
|
|
Token | Summary | Copy |
---|---|---|
--rh-color-border-strong
|
Connecting line color between steps |
|
--rh-color-text-primary
|
Step label color (default state) |
|
--rh-length-xl
|
Base icon container size |
|
--rh-size-icon-02
|
Icon size for step indicators |
|
--rh-color-border-subtle
|
Connecting line color for inactive steps |
|
--rh-length-2xl
|
Horizontal padding between steps in compact mode Vertical padding between steps in compact vertical mode |
|
--rh-length-xs
|
Vertical spacing between rows in step grid Vertical spacing between step elements |
|
--rh-length-lg
|
Horizontal gap between step elements Vertical spacing between stepper elements Horizontal gap between icon and label in vertical mode Horizontal padding in compact horizontal mode Vertical padding in compact vertical mode Horizontal padding override for compact steps |
|
--rh-color-status-note
|
Color for active step in compact mode |
|
--rh-color-status-success
|
Color for completed step in compact mode |
|
--rh-color-yellow-50
|
Warning step color in light mode |
|
--rh-color-yellow-30
|
Warning step color in dark mode |
|
--rh-color-yellow-60
|
Warning step label color in light mode |
|
--rh-color-yellow-20
|
Warning step label color in dark mode |
|
--rh-color-status-danger
|
Color for failed step icon in compact mode Color for failed step label in compact mode |
|
rh-progress-step
A progress step represents a single step in a progress stepper. Each step can have different states and may include an icon, label, and description. Steps can also be linked to URLs.
Slot Name | Summary | Description |
---|---|---|
|
A short title (1 to 3 words) for each step is required and serves as the step's accessible name. Titles can be hyperlinked. Do not add punctuation to end. |
|
icon |
custom icon for the step |
Overrides the |
description |
Elaborative, optional description for the step |
Rich HTML content can be slotted here , to override the (plain text) |
Attribute | DOM Property | Description | Type | Default |
---|---|---|---|---|
state |
state |
Sets the state of the progress step
|
|
|
description |
description |
Sets the description text for the progress step when more context is needed. Descriptions are secondary to titles. It is overridden by the |
|
|
icon |
icon |
Can be used to set a custom icon for the step.
When the step is in the It can be overridden by the |
|
|
icon-set |
iconSet |
Icon set for the |
|
|
href |
href |
Sets a URL to make the step's title clickable. Only completed or current steps will appear linked. The linked title will use our inline link styling, with gray, dashed underlines. |
|
|
Event Name | Description |
---|---|
change |
fired when this step becomes active |
Token | Summary | Copy |
---|---|---|
--rh-color-text-primary
|
Icon color (default state) Label text color (default state) |
|
--rh-length-5xl
|
Horizontal padding in compact mode at wide viewports |
|
--rh-color-text-secondary
|
A step's description color |
|
--rh-font-family-body-text
|
Font family for step labels and descriptions |
|
--rh-font-size-body-text-md
|
Font size for step labels |
|
--rh-border-width-md
|
Icon border width |
|
--rh-color-surface-lightest
|
Icon background in light mode |
|
--rh-color-surface-darkest
|
Icon background in dark mode |
|
--rh-color-gray-50
|
Link underline color in light mode |
|
--rh-color-gray-40
|
Link underline color in dark mode |
|
--rh-color-interactive-primary-hover
|
Link text color on hover Link underline color on hover |
|
--rh-font-weight-body-text-regular
|
Font weight for labels of steps Font weight for step descriptions |
|
--rh-font-size-body-text-xs
|
Font size for step descriptions |
|
--rh-color-status-note
|
Icon color when step is active |
|
--rh-color-status-success
|
Icon color when step is complete |
|
--rh-color-yellow-50
|
Warning icon color in light mode |
|
--rh-color-yellow-30
|
Warning icon color in dark mode |
|
--rh-color-yellow-60
|
Warning label color in light mode |
|
--rh-color-yellow-20
|
Warning label color in dark mode |
|
--rh-color-status-danger
|
Icon color when step has failed Label color when step has failed |
|
--rh-font-weight-body-text-medium
|
Font weight for current/active/warn/fail step labels |
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.