Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements 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 Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile
Personalization All Personalization PatternsAnnouncement
Accessibility 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.

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

Coming soon

Edit this page on GitHub
© 2025 Red Hat Deploys by Netlify