Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Progress stepper

OverviewStyleGuidelinesCodeAccessibilityDemos
StyleColor schemeVariantsInteraction statesStyleColor schemeVariantsInteraction states

Style

A progress stepper is a group of at least 3 sequential steps placed in the middle of a horizontal or vertical line.

A progress stepper with annotations around the items listed below.
  1. Status icon
  2. Title
  3. Optional description

Status icons

A progress stepper uses icons to indicate the status of a process or task. These icons change as users move through each step.

Three compact progress steppers showing current step, warning, and error states.

Custom icons

A progress stepper can also include custom icons. When a custom icon is used for a completed or a current step, the color will change, like a default status icon, but the custom icon will remain visible. If the step fails or has a warning, the custom icon will be replaced by the warning or error status icon.

Horizontal progress stepper showing two green completed steps with default icons, a current step with a purple custom gear icon, and a not yet completed step without an icon.

Color scheme

A progress stepper is available in both light and dark color schemes.

Light scheme

Light scheme progress stepper showing two completed steps, a current step, and a not yet completed last step.

Dark scheme

Dark scheme progress stepper showing two completed steps, a current step, and a not yet completed last step.

Variants

Orientation

A progress stepper is available in both horizontal and vertical orientations.

Two progress steppers. One horizontal, one vertical. Each contain four steps.

Size

A progress stepper is available in both default and compact sizes.

Three progress steppers. One horizontal with descriptions. Two other compact progress steppers, one horizontal one vertical.

Descriptions

If more description is needed, a progress stepper with descriptions can be used which allows for more context for each step.

Two horizontal progress steppers. One with and one without a description below each step's label.

Space

Four progress steppers showing 32px space between each step's text. There's 16px space between the icon and the label for all variants except the default horizontal stepper. For the default, there's 8px of margin bottom between the icon and the label.

Interaction states

When the titles in a progress stepper are linked, the interaction states use our inline link styling. Only the completed or current steps will be linked.

Hover

The dashed underline offset value increases by 1 pixel on hover.

A progress stepper with dashed underlines below two completed steps and one current step to indicate that they're linked. A cursor hovers over the first completed step.

Focus and active

The focus and active states of linked progress steps look similar to the hover state, but a focus ring is added around the link.

A progress stepper with dashed underlines below two completed steps and one current step to indicate that they're linked. A focus ring appears around the linked current step.
Edit this page on GitHub
© 2025 Red Hat Deploys by Netlify