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
Progress steppers have default icons associated with the variant property, and may be overriden and customized using the icon property.
Basic with descriptions
- First stepThis is the first thing to happen
- Second stepThis is the second thing to happen
- Third stepThis is the last thing to happen
Center aligned with descriptions
- First stepThis is the first thing to happen
- Second stepThis is the second thing to happen
- Third stepThis is the last thing to happen
Vertical with descriptions
- First stepThis is the first thing to happen
- Second stepThis is the second thing to happen
- Third stepThis 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.
- First step
- Second step
- Third step
With help popover
To add a popover to a progress step, set the popoverRender properties on the ProgressStep component.
- First step
- Second step
- Third step
- Fourth step
Props
ProgressStepper
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the progress stepper. | |
| className | string | Additional classes applied to the progress stepper container. | |
| isCenterAligned | boolean | Flag indicating the progress stepper should be centered. | |
| isCompact | boolean | Flag indicating the progress stepper should be rendered compactly. | |
| isVertical | boolean | Flag indicating the progress stepper has a vertical layout. |
ProgressStep
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | Accessible label for the progress step. Should communicate all information being communicated by the progress step's icon, including the variant and the completed status. | |
| children | React.ReactNode | Content rendered inside the progress step. | |
| className | string | Additional classes applied to the progress step container. | |
| description | string | Description text of a progress step. | |
| icon | React.ReactNode | Custom icon of a progress step. Will override default icons provided by the variant. | |
| isCurrent | boolean | Flag indicating the progress step is the current step. | |
| popoverRender | (stepRef: React.RefObject<any>) => React.ReactNode | Forwards the step ref to rendered function. Use this prop to add a popover to the step. | |
| titleId | string | ID 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-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
