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. Learn more about Beta components here.

Examples

Progress steppers have default icons associated with the variant property, and may be overriden and customized using the icon property.

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

Compact progress steppers will only display the current step's title, and will not display any steps' description texts.

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

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 popover

To add a popover to a progress step, set the popover and ref properties on the ProgressStep component and the reference property on the Popover component.

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

Props

ProgressStepper

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the progress stepper.
classNamestringAdditional classes applied to the progress stepper container.
isCenterAlignedbooleanFlag indicating the progress stepper should be centered.
isCompactbooleanFlag indicating the progress stepper should be rendered compactly.
isVerticalbooleanFlag indicating the progress stepper has a vertical layout.

ProgressStep

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the progress step.
classNamestringAdditional classes applied to the progress step container.
descriptionstringDescription text of a progress step.
iconReact.ReactNodeCustom icon of a progress step. Will override default icons provided by the variant.
isCurrentbooleanFlag indicating the progress step is the current step.
popoverReact.ReactNodePopover for a progress step.
titleIdstringID of the title of the progress step.
variant'default' | 'success' | 'info' | 'pending' | 'warning' | 'danger'Variant of the progress step. Each variant has a default icon.

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-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
undefined
.pf-c-progress-stepper.pf-m-center--pf-c-progress-stepper__step-description--MarginLeft
undefined
.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-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