Examples
Progress steppers have default icons associated with the variant property, and may be overriden and customized using the icon property.
With step 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
With alignment
- 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.
- Fourth step
Props
ProgressStepper
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | Adds an accessible label to the progress stepper. | |
| 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 | React.ReactNode | 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
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-vertical--GridAutoFlow | row | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-vertical--GridTemplateColumns | auto 1fr | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetBlockStart | 0 | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetInlineStart | calc(1.5rem / 2) | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-vertical__step-connector--before--Width | auto | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-vertical__step-connector--before--Height | 100% | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderInlineEndWidth | 1px | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderInlineEndColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderBlockEndWidth | 0 | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderBlockEndColor | transparent | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-vertical__step-connector--before--Transform | translateX(-50%) | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockStart | 0px | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineEnd | 0 | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockEnd | 2rem | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns | 1fr | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow | auto | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-vertical--m-compact__step-main--MarginBlockStart | 0 | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-vertical--m-compact__step-main--MarginInlineEnd | 0 | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-vertical--m-compact__step-main--MarginInlineStart | 0 | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-vertical--m-center__step-main--MarginInlineEnd | 0 | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-vertical--m-center__step-main--MarginInlineStart | 0 | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-horizontal--GridAutoFlow | column | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-horizontal--GridTemplateColumns | initial | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetBlockStart | calc(1.5rem / 2) | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetInlineStart | 0 | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Width | 100% | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Height | auto | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderInlineEndWidth | 0 | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderInlineEndColor | unset | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderBlockEndWidth | 1px | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderBlockEndColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Transform | translateY(-50%) | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-horizontal__step-main--MarginBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-horizontal__step-main--MarginInlineEnd | 0.5rem | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-horizontal__step-main--MarginBlockEnd | 0 | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-horizontal__step-main--MarginInlineStart | 0 | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns | repeat(auto-fill, 1.75rem) | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBlockEnd | 0 | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow | 2 | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-compact--GridAutoFlow | row | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-compact__step-main--MarginBlockStart | 0 | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-compact__step-main--MarginBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-compact__step-connector--MinWidth | 1.75rem | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-compact__step-icon--Width | 1.125rem | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-compact__step-icon--FontSize | 0.75rem | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-compact__step-title--FontSize | 1rem | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-compact__step-title--FontWeight | 500 | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-compact__pficon--MarginBlockStart | 2px | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginBlockStart | -3px | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-center__step-connector--before--InsetInlineStart | 50% | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-center--GridTemplateColumns | 1fr | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-center__step-connector--JustifyContent | center | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-center__step-main--MarginInlineEnd | 0.25rem | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-center__step-main--MarginInlineStart | 0.25rem | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-center__step-main--TextAlign | center | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-center__step-description--MarginInlineEnd | 0 | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-center__step-description--MarginInlineStart | 0 | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--GridTemplateRows | auto 1fr | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-connector--JustifyContent | flex-start | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-icon--ZIndex | 100 | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-icon--Width | 1.5rem | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-icon--Height | 1.5rem | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-icon--FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-icon--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-icon--BorderWidth | 1px | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-icon--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step--m-current__step-icon--Color | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step--m-info__step-icon--Color | (In light theme) #5e40be | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step--m-success__step-icon--Color | (In light theme) #3d7317 | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step--m-warning__step-icon--Color | (In light theme) #dca614 | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step--m-danger__step-icon--Color | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step--m-custom__step-icon--Color | (In light theme) #147878 | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__pficon--MarginBlockStart | 3px | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__fa-exclamation-triangle--MarginBlockStart | -2px | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-title--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-title--TextAlign | start | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-title--FontSize | 1rem | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-title--FontWeight | 400 | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step--m-current__step-title--FontWeight | 500 | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step--m-current__step-title--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step--m-pending__step-title--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step--m-danger__step-title--Color | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-title--m-help-text--PaddingInlineStart | 0 | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-title--m-help-text--PaddingInlineEnd | 0 | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationLine | underline | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationStyle | dashed | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset | 0.25rem | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-title--m-help-text--hover--TextDecorationLine | underline | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-title--m-help-text--hover--TextDecorationStyle | dashed | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-title--m-help-text--hover--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-description--MarginBlockStart | 0.25rem | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-description--FontSize | 0.75rem | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-description--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-description--TextAlign | start | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--GridAutoFlow | row | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--GridTemplateColumns | auto 1fr | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-connector--before--InsetBlockStart | 0 | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-connector--before--InsetInlineStart | calc(1.5rem / 2) | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-connector--before--Width | auto | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-connector--before--Height | 100% | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndWidth | 1px | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndWidth | 0 | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndColor | transparent | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-connector--before--Transform | translateX(-50%) | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-main--MarginBlockStart | 0px | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-main--MarginInlineEnd | 0 | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-main--MarginBlockEnd | 2rem | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper__step-main--MarginInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-compact--GridTemplateColumns | 1fr | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-compact__step-connector--GridRow | auto | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-compact__step-connector--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-center__step-connector--before--Content | none | ||
| .pf-v6-c-progress-stepper | --pf-v6-c-progress-stepper--m-center__step-main--before--Content | "" | ||
| .pf-v6-c-progress-stepper.pf-m-center | --pf-v6-c-progress-stepper__step-connector--JustifyContent | center | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-center | --pf-v6-c-progress-stepper__step-main--MarginInlineEnd | 0.25rem | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-center | --pf-v6-c-progress-stepper__step-main--MarginInlineStart | 0.25rem | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-center | --pf-v6-c-progress-stepper--step-main--TextAlign | center, auto | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-center | --pf-v6-c-progress-stepper__step-title--TextAlign | undefined, auto | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-center | --pf-v6-c-progress-stepper__step-description--MarginInlineEnd | 0 | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-center | --pf-v6-c-progress-stepper__step-description--MarginInlineStart | 0 | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-center | --pf-v6-c-progress-stepper__step-description--TextAlign | undefined, auto | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-center | --pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineEnd | 0 | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-center | --pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineStart | 0 | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-compact | --pf-v6-c-progress-stepper__step-main--MarginBlockStart | 0 | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-compact | --pf-v6-c-progress-stepper__step-main--MarginBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-compact | --pf-v6-c-progress-stepper__step-icon--Width | 1.125rem | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-compact | --pf-v6-c-progress-stepper__step-icon--FontSize | 0.75rem | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-compact | --pf-v6-c-progress-stepper__step-title--FontSize | 1rem | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-compact | --pf-v6-c-progress-stepper__step--m-current__step-title--FontWeight | 500 | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-compact | --pf-v6-c-progress-stepper__pficon--MarginBlockStart | 2px | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-compact | --pf-v6-c-progress-stepper__fa-exclamation-triangle--MarginBlockStart | -3px | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-compact | --pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockStart | 0 | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-compact | --pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineEnd | 0 | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-compact | --pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineStart | 0 | ||
| ||||
| .pf-v6-c-progress-stepper__step.pf-m-current | --pf-v6-c-progress-stepper__step-title--FontWeight | 500 | ||
| ||||
| .pf-v6-c-progress-stepper__step.pf-m-current | --pf-v6-c-progress-stepper__step-title--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-progress-stepper__step.pf-m-current | --pf-v6-c-progress-stepper__step-icon--Color | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-progress-stepper__step.pf-m-pending | --pf-v6-c-progress-stepper__step-title--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-progress-stepper__step.pf-m-success | --pf-v6-c-progress-stepper__step-icon--Color | (In light theme) #3d7317 | ||
| ||||
| .pf-v6-c-progress-stepper__step.pf-m-danger | --pf-v6-c-progress-stepper__step-icon--Color | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-progress-stepper__step.pf-m-danger | --pf-v6-c-progress-stepper__step-title--Color | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-progress-stepper__step.pf-m-danger | --pf-v6-c-progress-stepper__step-title--m-help-text--hover--Color | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-progress-stepper__step.pf-m-warning | --pf-v6-c-progress-stepper__step-icon--Color | (In light theme) #dca614 | ||
| ||||
| .pf-v6-c-progress-stepper__step.pf-m-info | --pf-v6-c-progress-stepper__step-icon--Color | (In light theme) #5e40be | ||
| ||||
| .pf-v6-c-progress-stepper__step.pf-m-custom | --pf-v6-c-progress-stepper__step-icon--Color | (In light theme) #147878 | ||
| ||||
| .pf-v6-c-progress-stepper__step:last-child | --pf-v6-c-progress-stepper__step-main--MarginBlockEnd | 0 | ||
| .pf-v6-c-progress-stepper__step-title.pf-m-help-text:is(:hover, :focus) | --pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationLine | underline | ||
| ||||
| .pf-v6-c-progress-stepper__step-title.pf-m-help-text:is(:hover, :focus) | --pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationStyle | dashed | ||
| ||||
| .pf-v6-c-progress-stepper__step-title.pf-m-help-text:is(:hover, :focus) | --pf-v6-c-progress-stepper__step-title--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-horizontal | --pf-v6-c-progress-stepper--GridAutoFlow | column | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-horizontal | --pf-v6-c-progress-stepper--GridTemplateColumns | initial | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-horizontal | --pf-v6-c-progress-stepper__step-connector--before--InsetBlockStart | calc(1.5rem / 2) | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-horizontal | --pf-v6-c-progress-stepper__step-connector--before--InsetInlineStart | 0 | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-horizontal | --pf-v6-c-progress-stepper__step-connector--before--Width | 100% | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-horizontal | --pf-v6-c-progress-stepper__step-connector--before--Height | auto | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-horizontal | --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndWidth | 0 | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-horizontal | --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndColor | unset | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-horizontal | --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndWidth | 1px | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-horizontal | --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-horizontal | --pf-v6-c-progress-stepper__step-connector--before--Transform | translateY(-50%) | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-horizontal | --pf-v6-c-progress-stepper__step-main--MarginBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-horizontal | --pf-v6-c-progress-stepper__step-main--MarginInlineEnd | 0.5rem | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-horizontal | --pf-v6-c-progress-stepper__step-main--MarginBlockEnd | 0 | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-horizontal | --pf-v6-c-progress-stepper__step-main--MarginInlineStart | 0 | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-horizontal | --pf-v6-c-progress-stepper--m-compact--GridTemplateColumns | repeat(auto-fill, 1.75rem) | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-horizontal | --pf-v6-c-progress-stepper--m-compact__step-connector--GridRow | 2 | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-horizontal | --pf-v6-c-progress-stepper--m-compact__step-connector--PaddingBlockEnd | 0 | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-horizontal | --pf-v6-c-progress-stepper--m-center__step-connector--before--Content | "" | ||
| .pf-v6-c-progress-stepper.pf-m-horizontal | --pf-v6-c-progress-stepper--m-center__step-main--before--Content | none | ||
| .pf-v6-c-progress-stepper.pf-m-vertical | --pf-v6-c-progress-stepper--GridAutoFlow | row | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-vertical | --pf-v6-c-progress-stepper--GridTemplateColumns | auto 1fr | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-vertical | --pf-v6-c-progress-stepper__step-connector--before--InsetBlockStart | 0 | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-vertical | --pf-v6-c-progress-stepper__step-connector--before--InsetInlineStart | calc(1.5rem / 2) | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-vertical | --pf-v6-c-progress-stepper__step-connector--before--Width | auto | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-vertical | --pf-v6-c-progress-stepper__step-connector--before--Height | 100% | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-vertical | --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndWidth | 1px | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-vertical | --pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-vertical | --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndWidth | 0 | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-vertical | --pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndColor | transparent | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-vertical | --pf-v6-c-progress-stepper__step-connector--before--Transform | translateX(-50%) | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-vertical | --pf-v6-c-progress-stepper__step-main--MarginBlockStart | 0px | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-vertical | --pf-v6-c-progress-stepper__step-main--MarginInlineEnd | 0 | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-vertical | --pf-v6-c-progress-stepper__step-main--MarginBlockEnd | 2rem | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-vertical | --pf-v6-c-progress-stepper__step-main--MarginInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-vertical | --pf-v6-c-progress-stepper--m-compact--GridTemplateColumns | 1fr | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-vertical | --pf-v6-c-progress-stepper--m-compact__step-connector--GridRow | auto | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-vertical | --pf-v6-c-progress-stepper--m-compact__step-connector--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-progress-stepper.pf-m-vertical | --pf-v6-c-progress-stepper--m-center__step-connector--before--Content | none | ||
| .pf-v6-c-progress-stepper.pf-m-vertical | --pf-v6-c-progress-stepper--m-center__step-main--before--Content | "" | ||