Skip to content
Patternfly Logo

Progress stepper

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.

Examples

Basic

  1. First step
  2. Second step
  3. Third step

Basic with descriptions

  1. First step
    This is the first thing to happen
  2. Second step
    This is the second thing to happen
  3. Third step
    This is the last thing to happen

Center aligned with descriptions

  1. First step
    This is the first thing to happen
  2. Second step
    This is the second thing to happen
  3. Third step
    This is the last thing to happen

Vertical with descriptions

  1. First step
    This is the first thing to happen
  2. Second step
    This is the second thing to happen
  3. Third step
    This is the last thing to happen

Compact

  1. First step
    This is the first thing to happen
  2. Second step
    This is the second thing to happen
  3. Third step
    This is the last thing to happen

Basic with an issue

  1. First step
  2. Second step
  3. Third step
  4. Fourth step
  5. Fifth step

Basic with a failure

  1. First step
  2. Second step
  3. Third step
  4. Fourth step
  5. Fifth step

Basic with Patternfly icons

  1. Successful completion
  2. In process
  3. Pending

With help text

  1. First step
  2. Second step
  3. Third step
  4. Fourth step

Documentation

Overview

The progress stepper is intended to show progress through a finite number of discrete steps.

Add a modifier class to the progress stepper to change the orientation or alignment: .pf-m-center, .pf-m-vertical, or .pf-m-compact.

Steps can be modified with .pf-m-success, .pf-m-warning, .pf-m-danger, and .pf-m-info to change their color. Use modifiers .pf-m-pending and .pf-m-current to indicate progress through the steps.

Accessibility

Attribute
Applied to
Outcome
aria-label="[State of the step]"
.pf-c-progress-stepper__step
Provides an accessible label for the step.
aria-hidden="true"
.pf-c-progress-stepper__step-icon <i>
Hides icon for assistive technologies. Required

Usage

Class
Applied to
Outcome
.pf-c-progress-stepper
<ol>
Applies default progress stepper styling. Required
.pf-c-progress-stepper__step
<li>
Defines each step of the progress stepper. Required
.progress-stepper__step-connector
<div>
Creates the connecting line between steps Required
.progress-stepper__step-icon
<span>
Creates the step node and contains the icon designating the type of step. This element is required, but may be empty if no icon is used for the step. Required
.progress-stepper__step-main
<div>
Contains the main text content of the step. This element is required, but may be empty if title and description are not used. Required
.progress-stepper__step-title
<div>
Contains the title of the step.
.progress-stepper__step-description
<div>
Contains the description of the step.
.pf-m-center
.pf-c-progress-stepper
Modifies to center each step.
.pf-m-vertical
.pf-c-progress-stepper
Modifies for vertical orientation.
.pf-m-compact
.pf-c-progress-stepper
Modifies for compact styling.
.pf-m-success
.pf-c-progress-stepper__step
Modifies for success styling.
.pf-m-warning
.pf-c-progress-stepper__step
Modifies for warning styling.
.pf-m-danger
.pf-c-progress-stepper__step
Modifies for danger styling.
.pf-m-info
.pf-c-progress-stepper__step
Modifies for info styling.
.pf-m-current
.pf-c-progress-stepper__step
Modifies styling for the current step.
.pf-m-pending
.pf-c-progress-stepper__step
Modifies styling for pending steps.
.pf-m-help-text
.pf-c-progress-stepper__step-title
Modifies styling for steps that have help text.

CSS variables

.pf-c-progress-stepper--pf-c-progress-stepper--GridAutoFlow
column
.pf-c-progress-stepper--pf-c-progress-stepper--GridTemplateRows
auto 1fr
.pf-c-progress-stepper--pf-c-progress-stepper--GridTemplateColumns
initial
.pf-c-progress-stepper--pf-c-progress-stepper--m-vertical--GridAutoFlow
row
.pf-c-progress-stepper--pf-c-progress-stepper--m-vertical--GridTemplateColumns
auto 1fr
.pf-c-progress-stepper--pf-c-progress-stepper--m-compact--GridAutoFlow
row
.pf-c-progress-stepper--pf-c-progress-stepper--m-compact--GridTemplateColumns
repeat(auto-fill, 1.75rem)
.pf-c-progress-stepper--pf-c-progress-stepper__step-connector--JustifyContent
start
.pf-c-progress-stepper--pf-c-progress-stepper--m-center__step-connector--JustifyContent
center
.pf-c-progress-stepper--pf-c-progress-stepper__step-icon--ZIndex
100
.pf-c-progress-stepper--pf-c-progress-stepper__step-icon--Width
1.75rem
.pf-c-progress-stepper--pf-c-progress-stepper__step-icon--Height
1.75rem
.pf-c-progress-stepper--pf-c-progress-stepper__step-icon--FontSize
1.125rem
.pf-c-progress-stepper--pf-c-progress-stepper__step-icon--Color
#151515
.pf-c-progress-stepper--pf-c-progress-stepper__step-icon--BackgroundColor
#fafafa
.pf-c-progress-stepper--pf-c-progress-stepper__step-icon--BorderWidth
2px
.pf-c-progress-stepper--pf-c-progress-stepper__step-icon--BorderColor
#d2d2d2
.pf-c-progress-stepper--pf-c-progress-stepper--m-compact__step-icon--Width
1.125rem
.pf-c-progress-stepper--pf-c-progress-stepper--m-compact__step-icon--FontSize
0.625rem
.pf-c-progress-stepper--pf-c-progress-stepper__pficon--MarginTop
3px
.pf-c-progress-stepper--pf-c-progress-stepper__fa-exclamation-triangle--MarginTop
-5px
.pf-c-progress-stepper--pf-c-progress-stepper--m-compact__pficon--MarginTop
2px
.pf-c-progress-stepper--pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop
-3px
.pf-c-progress-stepper--pf-c-progress-stepper__step-connector--before--Top
calc(1.75rem / 2)
.pf-c-progress-stepper--pf-c-progress-stepper__step-connector--before--Left
0
.pf-c-progress-stepper--pf-c-progress-stepper__step-connector--before--Width
100%
.pf-c-progress-stepper--pf-c-progress-stepper__step-connector--before--Height
auto
.pf-c-progress-stepper--pf-c-progress-stepper__step-connector--before--BorderRightColor
unset
.pf-c-progress-stepper--pf-c-progress-stepper__step-connector--before--BorderRightWidth
0
.pf-c-progress-stepper--pf-c-progress-stepper__step-connector--before--BorderBottomWidth
2px
.pf-c-progress-stepper--pf-c-progress-stepper__step-connector--before--BorderBottomColor
#d2d2d2
.pf-c-progress-stepper--pf-c-progress-stepper__step-connector--before--Transform
translateY(-50%)
.pf-c-progress-stepper--pf-c-progress-stepper--m-center__step-connector--before--Left
50%
.pf-c-progress-stepper--pf-c-progress-stepper--m-vertical__step-connector--before--Top
0
.pf-c-progress-stepper--pf-c-progress-stepper--m-vertical__step-connector--before--Left
calc(1.75rem / 2)
.pf-c-progress-stepper--pf-c-progress-stepper--m-vertical__step-connector--before--Width
auto
.pf-c-progress-stepper--pf-c-progress-stepper--m-vertical__step-connector--before--Height
100%
.pf-c-progress-stepper--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth
2px
.pf-c-progress-stepper--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor
#d2d2d2
.pf-c-progress-stepper--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth
0
.pf-c-progress-stepper--pf-c-progress-stepper--m-vertical__step-connector--before--Transform
translateX(-50%)
.pf-c-progress-stepper--pf-c-progress-stepper__step-main--MarginTop
0.5rem
.pf-c-progress-stepper--pf-c-progress-stepper__step-main--MarginRight
0.5rem
.pf-c-progress-stepper--pf-c-progress-stepper__step-main--MarginBottom
0
.pf-c-progress-stepper--pf-c-progress-stepper__step-main--MarginLeft
0
.pf-c-progress-stepper--pf-c-progress-stepper--m-center__step-main--MarginRight
0.25rem
.pf-c-progress-stepper--pf-c-progress-stepper--m-center__step-main--MarginLeft
0.25rem
.pf-c-progress-stepper--pf-c-progress-stepper--m-vertical__step-main--MarginTop
0.25rem
.pf-c-progress-stepper--pf-c-progress-stepper--m-vertical__step-main--MarginRight
0
.pf-c-progress-stepper--pf-c-progress-stepper--m-vertical__step-main--MarginBottom
2rem
.pf-c-progress-stepper--pf-c-progress-stepper--m-vertical__step-main--MarginLeft
0.25rem
.pf-c-progress-stepper--pf-c-progress-stepper--m-compact__step-main--MarginTop
0
.pf-c-progress-stepper--pf-c-progress-stepper--m-compact__step-main--MarginBottom
0.5rem
.pf-c-progress-stepper--pf-c-progress-stepper__step-title--Color
#151515
.pf-c-progress-stepper--pf-c-progress-stepper__step-title--TextAlign
left
.pf-c-progress-stepper--pf-c-progress-stepper__step-title--FontSize
1rem
.pf-c-progress-stepper--pf-c-progress-stepper__step-title--FontWeight
400
.pf-c-progress-stepper--pf-c-progress-stepper__step--m-current__step-title--FontWeight
700
.pf-c-progress-stepper--pf-c-progress-stepper__step--m-current__step-title--Color
#151515
.pf-c-progress-stepper--pf-c-progress-stepper__step--m-pending__step-title--Color
#6a6e73
.pf-c-progress-stepper--pf-c-progress-stepper__step--m-danger__step-title--Color
#c9190b
.pf-c-progress-stepper--pf-c-progress-stepper--m-center__step-title--TextAlign
center
.pf-c-progress-stepper--pf-c-progress-stepper--m-compact__step-title--FontSize
0.875rem
.pf-c-progress-stepper--pf-c-progress-stepper--m-compact__step-title--FontWeight
400
.pf-c-progress-stepper--pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor
#8a8d90
.pf-c-progress-stepper--pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness
1px
.pf-c-progress-stepper--pf-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset
0.25rem
.pf-c-progress-stepper--pf-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor
#151515
.pf-c-progress-stepper--pf-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor
#151515
.pf-c-progress-stepper--pf-c-progress-stepper__step-title--m-help-text--hover--Color
#151515
.pf-c-progress-stepper--pf-c-progress-stepper__step-title--m-help-text--focus--Color
#151515
.pf-c-progress-stepper--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color
#a30000
.pf-c-progress-stepper--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color
#a30000
.pf-c-progress-stepper--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor
#c9190b
.pf-c-progress-stepper--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor
#a30000
.pf-c-progress-stepper--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecorationColor
#a30000
.pf-c-progress-stepper--pf-c-progress-stepper__step-description--MarginTop
0.25rem
.pf-c-progress-stepper--pf-c-progress-stepper__step-description--FontSize
0.875rem
.pf-c-progress-stepper--pf-c-progress-stepper__step-description--Color
#6a6e73
.pf-c-progress-stepper--pf-c-progress-stepper__step-description--TextAlign
left
.pf-c-progress-stepper--pf-c-progress-stepper--m-center__step-description--TextAlign
center
.pf-c-progress-stepper--pf-c-progress-stepper--m-center__step-description--MarginRight
0
.pf-c-progress-stepper--pf-c-progress-stepper--m-center__step-description--MarginLeft
0
.pf-c-progress-stepper.pf-m-center--pf-c-progress-stepper__step-connector--before--Left
50%
.pf-c-progress-stepper.pf-m-center--pf-c-progress-stepper__step-connector--JustifyContent
center
.pf-c-progress-stepper.pf-m-center--pf-c-progress-stepper__step-main--MarginRight
0.25rem
.pf-c-progress-stepper.pf-m-center--pf-c-progress-stepper__step-main--MarginLeft
0.25rem
.pf-c-progress-stepper.pf-m-center--pf-c-progress-stepper__step-description--MarginRight
0
.pf-c-progress-stepper.pf-m-center--pf-c-progress-stepper__step-description--MarginLeft
0
.pf-c-progress-stepper.pf-m-center--pf-c-progress-stepper__step-title--TextAlign
center
.pf-c-progress-stepper.pf-m-center--pf-c-progress-stepper__step-description--TextAlign
center
.pf-c-progress-stepper.pf-m-vertical--pf-c-progress-stepper--GridAutoFlow
row
.pf-c-progress-stepper.pf-m-vertical--pf-c-progress-stepper--GridTemplateColumns
auto 1fr
.pf-c-progress-stepper.pf-m-vertical--pf-c-progress-stepper__step-connector--before--Top
0
.pf-c-progress-stepper.pf-m-vertical--pf-c-progress-stepper__step-connector--before--Left
calc(1.75rem / 2)
.pf-c-progress-stepper.pf-m-vertical--pf-c-progress-stepper__step-connector--before--Width
auto
.pf-c-progress-stepper.pf-m-vertical--pf-c-progress-stepper__step-connector--before--Height
100%
.pf-c-progress-stepper.pf-m-vertical--pf-c-progress-stepper__step-connector--before--BorderRightWidth
2px
.pf-c-progress-stepper.pf-m-vertical--pf-c-progress-stepper__step-connector--before--BorderRightColor
#d2d2d2
.pf-c-progress-stepper.pf-m-vertical--pf-c-progress-stepper__step-connector--before--BorderBottomWidth
0
.pf-c-progress-stepper.pf-m-vertical--pf-c-progress-stepper__step-connector--before--Transform
translateX(-50%)
.pf-c-progress-stepper.pf-m-vertical--pf-c-progress-stepper__step-main--MarginTop
0.25rem
.pf-c-progress-stepper.pf-m-vertical--pf-c-progress-stepper__step-main--MarginRight
0
.pf-c-progress-stepper.pf-m-vertical--pf-c-progress-stepper__step-main--MarginBottom
2rem
.pf-c-progress-stepper.pf-m-vertical--pf-c-progress-stepper__step-main--MarginLeft
0.25rem
.pf-c-progress-stepper.pf-m-compact--pf-c-progress-stepper--GridAutoFlow
row
.pf-c-progress-stepper.pf-m-compact--pf-c-progress-stepper--GridTemplateColumns
repeat(auto-fill, 1.75rem)
.pf-c-progress-stepper.pf-m-compact--pf-c-progress-stepper__step-icon--Width
1.125rem
.pf-c-progress-stepper.pf-m-compact--pf-c-progress-stepper__step-icon--FontSize
0.625rem
.pf-c-progress-stepper.pf-m-compact--pf-c-progress-stepper__pficon--MarginTop
2px
.pf-c-progress-stepper.pf-m-compact--pf-c-progress-stepper__fa-exclamation-triangle--MarginTop
-3px
.pf-c-progress-stepper.pf-m-compact--pf-c-progress-stepper__step-main--MarginTop
0
.pf-c-progress-stepper.pf-m-compact--pf-c-progress-stepper__step-main--MarginBottom
0.5rem
.pf-c-progress-stepper.pf-m-compact--pf-c-progress-stepper__step-title--FontSize
0.875rem
.pf-c-progress-stepper.pf-m-compact--pf-c-progress-stepper__step--m-current__step-title--FontWeight
400
.pf-c-progress-stepper__step.pf-m-current--pf-c-progress-stepper__step-title--FontWeight
700
.pf-c-progress-stepper__step.pf-m-current--pf-c-progress-stepper__step-title--Color
#151515
.pf-c-progress-stepper__step.pf-m-pending--pf-c-progress-stepper__step-title--Color
#6a6e73
.pf-c-progress-stepper__step.pf-m-success--pf-c-progress-stepper__step-icon--Color
#3e8635
.pf-c-progress-stepper__step.pf-m-danger--pf-c-progress-stepper__step-icon--Color
#c9190b
.pf-c-progress-stepper__step.pf-m-danger--pf-c-progress-stepper__step-title--Color
#c9190b
.pf-c-progress-stepper__step.pf-m-danger--pf-c-progress-stepper__step-title--m-help-text--hover--Color
#a30000
.pf-c-progress-stepper__step.pf-m-danger--pf-c-progress-stepper__step-title--m-help-text--focus--Color
#a30000
.pf-c-progress-stepper__step.pf-m-danger--pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor
#c9190b
.pf-c-progress-stepper__step.pf-m-danger--pf-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor
#a30000
.pf-c-progress-stepper__step.pf-m-danger--pf-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor
#a30000
.pf-c-progress-stepper__step.pf-m-warning--pf-c-progress-stepper__step-icon--Color
#f0ab00
.pf-c-progress-stepper__step.pf-m-info--pf-c-progress-stepper__step-icon--Color
#2b9af3
.pf-c-progress-stepper__step:last-child--pf-c-progress-stepper__step-main--MarginBottom
0
.pf-c-progress-stepper__step-title.pf-m-help-text:hover--pf-c-progress-stepper__step-title--Color
#151515
.pf-c-progress-stepper__step-title.pf-m-help-text:hover--pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor
#151515
.pf-c-progress-stepper__step-title.pf-m-help-text:focus--pf-c-progress-stepper__step-title--Color
#151515
.pf-c-progress-stepper__step-title.pf-m-help-text:focus--pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor
#151515

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2021 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines