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
OverviewStatusWhen to useStatus checklistOverviewStatusWhen to useStatus checklist

Overview

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.
import '@rhds/elements/rh-progress-stepper/rh-progress-stepper.js';
 
<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>

Makes the element vertical at various container query based breakpoints. Breakpoints available 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'

Sets the orientation of the progress stepper

  • horizontal - Steps are displayed in a horizontal row
  • vertical - Steps are displayed in a vertical column

Makes element display as compact

Status

When to use

  • Keep users informed about how much time or effort a task will take to complete
  • Track progress in a step-by-step linear process on a single page
  • Display the total number of steps at all times

Status checklist

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