Progress Stepper
A progress stepper displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.
Installation
We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.
For more information on import maps and how to use them, see the import map reference on MDN Web Docs.
If you are using node and NPM, you can install this component using npm:
npm install @patternfly/elementsThen import this component into your project by using a bare module specifier:
import '@patternfly/elements/pf-progress-stepper/pf-progress-stepper.js';Please Note You should either load elements via a CDN or install them locally through NPM. Do not do both.
Overview
Installation
npm install @patternfly/elementsUsage
View HTML Source
<pf-progress-stepper>
<pf-progress-step variant="success">Completed</pf-progress-step>
<pf-progress-step current variant="warning">Issue</pf-progress-step>
<pf-progress-step variant="danger">Failure</pf-progress-step>
<pf-progress-step variant="info">Running</pf-progress-step>
<pf-progress-step>Last</pf-progress-step>
</pf-progress-stepper>
Slots
- Default Slot
Slots on pf-progress-step
-
icon -
icon Overrides the icon property
- Default Slot
-
Short description of the current step.
-
description -
description Longer description of the current step.
Attributes
vertical-
Whether to use the vertical layout
- DOM Property
vertical- Type
-
boolean - Default
-
false
center-
Whether to use the center alignment
- DOM Property
center- Type
-
boolean - Default
-
false
compact-
Whether to use the compact layout
- DOM Property
compact- Type
-
boolean - Default
-
false
Methods
None
Events
None
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-global--spacer--xl |
2rem
|
|
--pf-c-progress-stepper--m-compact__step-connector--MinWidth |
Minimum width for compact step connector |
1.75rem
|
--pf-global--icon--FontSize--sm |
0.625rem
|
|
--pf-c-progress-stepper__step-icon--ZIndex |
Z-index for step icon |
var(--pf-global--ZIndex--xs, 100)
|
--pf-global--ZIndex--xs |
100
|
|
--pf-c-progress-stepper__step-icon--Height |
Height of the step icon |
var(--pf-c-progress-stepper__step-icon--Width)
|
--pf-c-progress-stepper__step-icon--Width |
Width of the step icon |
1.75rem
|
--pf-c-progress-stepper__step-icon--FontSize |
Font size of the step icon |
var(--pf-global--FontSize--md, 1rem)
|
--pf-c-progress-stepper__step-icon--Color |
Color of the step icon |
var(--pf-global--Color--100, #151515)
|
--pf-c-progress-stepper__step-icon--BackgroundColor |
Background color of the step icon |
var(--pf-global--BackgroundColor--light-200, #fafafa)
|
--pf-global--BackgroundColor--light-200 |
#fafafa
|
|
--pf-c-progress-stepper__step-icon--BorderWidth |
Border width of the step icon |
var(--pf-global--BorderWidth--md, 2px)
|
--pf-global--BorderWidth--md |
2px
|
|
--pf-c-progress-stepper__step-icon--BorderColor |
Border color of the step icon |
var(--pf-global--BorderColor--100, #d2d2d2)
|
--pf-global--BorderColor--100 |
#d2d2d2
|
|
--pf-c-progress-stepper__pficon--MarginTop |
Top margin for pficon |
3px
|
--pf-c-progress-stepper__fa-exclamation-triangle--MarginTop |
Top margin for exclamation triangle icon |
-5px
|
--pf-c-progress-stepper__step-title--Color |
Color of the step title |
var(--pf-global--Color--100, #151515)
|
--pf-c-progress-stepper__step-title--TextAlign |
Text alignment of the step title |
left
|
--pf-c-progress-stepper__step-title--FontSize |
Font size of the step title |
var(--pf-global--FontSize--md, 1rem)
|
--pf-global--FontSize--md |
1rem
|
|
--pf-c-progress-stepper__step-title--FontWeight |
Font weight of the step title |
var(--pf-global--FontWeight--normal, 400)
|
--pf-global--FontWeight--normal |
400
|
|
--pf-c-progress-stepper__step--m-current__step-title--FontWeight |
Font weight for current step title |
var(--pf-global--FontWeight--bold, 700)
|
--pf-global--FontWeight--bold |
700
|
|
--pf-c-progress-stepper__step--m-current__step-title--Color |
Color for current step title |
var(--pf-global--Color--100, #151515)
|
--pf-c-progress-stepper__step--m-pending__step-title--Color |
Color for pending step title |
var(--pf-global--Color--200, #6a6e73)
|
--pf-c-progress-stepper__step--m-danger__step-title--Color |
Color for danger step title |
var(--pf-global--danger-color--100, #c9190b)
|
--pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor |
Text decoration color for help text step title |
var(--pf-global--BorderColor--200, #8a8d90)
|
--pf-global--BorderColor--200 |
#8a8d90
|
|
--pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness |
Text decoration thickness for help text step title |
var(--pf-global--BorderWidth--sm, 1px)
|
--pf-global--BorderWidth--sm |
1px
|
|
--pf-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset |
Text underline offset for help text step title |
0.25rem
|
--pf-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor |
Text decoration color for help text step title on hover |
var(--pf-global--Color--100, #151515)
|
--pf-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor |
Text decoration color for help text step title on focus |
var(--pf-global--Color--100, #151515)
|
--pf-c-progress-stepper__step-title--m-help-text--hover--Color |
Color for help text step title on hover |
var(--pf-global--Color--100, #151515)
|
--pf-c-progress-stepper__step-title--m-help-text--focus--Color |
Color for help text step title on focus |
var(--pf-global--Color--100, #151515)
|
--pf-global--Color--100 |
#151515
|
|
--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color |
Color for danger help text step title on hover |
var(--pf-global--danger-color--200, #a30000)
|
--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color |
Color for danger help text step title on focus |
var(--pf-global--danger-color--200, #a30000)
|
--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor |
Text decoration color for danger help text step title |
var(--pf-global--danger-color--100, #c9190b)
|
--pf-global--danger-color--100 |
#c9190b
|
|
--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor |
Text decoration color for danger help text step title on hover |
var(--pf-global--danger-color--200, #a30000)
|
--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecoerationColor |
Text decoration color for danger help text step title on focus |
var(--pf-global--danger-color--200, #a30000)
|
--pf-global--danger-color--200 |
#a30000
|
|
--pf-c-progress-stepper__step-description--MarginTop |
Top margin for step description |
var(--pf-global--spacer--xs, 0.25rem)
|
--pf-global--spacer--xs |
0.25rem
|
|
--pf-c-progress-stepper__step-description--FontSize |
Font size of the step description |
var(--pf-global--FontSize--sm, 0.875rem)
|
--pf-global--FontSize--sm |
0.875rem
|
|
--pf-c-progress-stepper__step-description--Color |
Color of the step description |
var(--pf-global--Color--200, #6a6e73)
|
--pf-global--Color--200 |
#6a6e73
|
|
--pf-c-progress-stepper__step-description--TextAlign |
Text alignment of the step description |
left
|
--pf-c-progress-stepper__step-connector--before--Top |
Top position for step connector pseudo-element (defaults to vertical) |
var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top)
|
--pf-c-progress-stepper--GridTemplateColumns |
Grid template columns (defaults to vertical) |
var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns)
|
--pf-c-progress-stepper--GridTemplateRows |
Grid template rows |
auto 1fr
|
--pf-c-progress-stepper--m-horizontal--GridAutoFlow |
Grid auto flow for horizontal layout |
column
|
--pf-c-progress-stepper--m-horizontal--GridTemplateColumns |
Grid template columns for horizontal layout |
initial
|
--pf-c-progress-stepper--m-horizontal__step-connector--before--Top |
Top position for horizontal step connector pseudo-element |
calc(var(--pf-c-progress-stepper__step-icon--Height) / 2)
|
--pf-c-progress-stepper--m-horizontal__step-connector--before--Left |
Left position for horizontal step connector pseudo-element |
0
|
--pf-c-progress-stepper--m-horizontal__step-connector--before--Width |
Width for horizontal step connector pseudo-element |
100%
|
--pf-c-progress-stepper--m-horizontal__step-connector--before--Height |
Height for horizontal step connector pseudo-element |
auto
|
--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth |
Right border width for horizontal step connector pseudo-element |
0
|
--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor |
Right border color for horizontal step connector pseudo-element |
unset
|
--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth |
Bottom border width for horizontal step connector pseudo-element |
var(--pf-global--BorderWidth--md, 2px)
|
--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor |
Bottom border color for horizontal step connector pseudo-element |
var(--pf-global--BorderColor--100, #d2d2d2)
|
--pf-c-progress-stepper--m-horizontal__step-connector--before--Transform |
Transform for horizontal step connector pseudo-element |
translateY(-50%)
|
--pf-c-progress-stepper--m-horizontal__step-main--MarginTop |
Top margin for horizontal step main content |
var(--pf-global--spacer--xs, 0.25rem)
|
--pf-c-progress-stepper--m-horizontal__step-main--MarginRight |
Right margin for horizontal step main content |
var(--pf-global--spacer--xs, 0.25rem)
|
--pf-c-progress-stepper--m-horizontal__step-main--MarginBottom |
Bottom margin for horizontal step main content |
0
|
--pf-c-progress-stepper--m-horizontal__step-main--MarginLeft |
Left margin for horizontal step main content |
0
|
--pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns |
Grid template columns for horizontal compact layout |
repeat(auto-fill, 1.75rem)
|
--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow |
Grid row for horizontal compact step connector |
2
|
--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom |
Padding bottom for horizontal compact step connector |
0
|
--pf-c-progress-stepper__step-connector--JustifyContent |
Justify content for step connector |
var(--pf-c-progress-stepper--m-center__step-connector--JustifyContent)
|
--pf-c-progress-stepper--m-center__step-connector--JustifyContent |
Justify content for centered step connector |
center
|
--pf-c-progress-stepper--m-center__step-main--MarginRight |
Right margin for centered step main content |
var(--pf-global--spacer--xs, 0.25rem)
|
--pf-c-progress-stepper--m-center__step-main--MarginLeft |
Left margin for centered step main content |
var(--pf-global--spacer--xs, 0.25rem)
|
--pf-c-progress-stepper--m-center__step-main--TextAlign |
Text alignment for centered step main content |
auto
|
--pf-c-progress-stepper--m-center__step-title--TextAlign |
auto
|
|
--pf-c-progress-stepper--m-center__step-description--MarginRight |
Right margin for centered step description |
0
|
--pf-c-progress-stepper--m-center__step-description--MarginLeft |
Left margin for centered step description |
0
|
--pf-c-progress-stepper--m-center__step-description--TextAlign |
auto
|
|
--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight |
Right margin for vertical centered step main content |
0
|
--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft |
Left margin for vertical centered step main content |
0
|
--pf-c-progress-stepper--m-center--GridTemplateColumns |
Grid template columns for centered layout |
1fr
|
--pf-c-progress-stepper__step-main--before--Content |
var(--pf-c-progress-stepper--m-center__step-main--before--Content)
|
|
--pf-c-progress-stepper--m-center__step-main--before--Content |
—
|
|
--pf-c-progress-stepper--m-center__step-connector--before--Content |
—
|
|
--pf-c-progress-stepper--GridAutoFlow |
Grid auto flow (defaults to vertical) |
var(--pf-c-progress-stepper--m-vertical--GridAutoFlow)
|
--pf-c-progress-stepper--m-vertical--GridAutoFlow |
Grid auto flow for vertical layout |
row
|
--pf-c-progress-stepper--m-vertical--GridTemplateColumns |
Grid template columns for vertical layout |
auto 1fr
|
--pf-c-progress-stepper--m-vertical__step-connector--before--Top |
Top position for vertical step connector pseudo-element |
0
|
--pf-c-progress-stepper--m-vertical__step-connector--before--Left |
Left position for vertical step connector pseudo-element |
calc(var(--pf-c-progress-stepper__step-icon--Width) / 2)
|
--pf-c-progress-stepper--m-vertical__step-connector--before--Width |
Width for vertical step connector pseudo-element |
auto
|
--pf-c-progress-stepper--m-vertical__step-connector--before--Height |
Height for vertical step connector pseudo-element |
100%
|
--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth |
Right border width for vertical step connector pseudo-element |
var(--pf-global--BorderWidth--md, 2px)
|
--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor |
Right border color for vertical step connector pseudo-element |
var(--pf-global--BorderColor--100, #d2d2d2)
|
--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth |
Bottom border width for vertical step connector pseudo-element |
0
|
--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor |
Bottom border color for vertical step connector pseudo-element |
transparent
|
--pf-c-progress-stepper--m-vertical__step-connector--before--Transform |
Transform for vertical step connector pseudo-element |
translateX(-50%)
|
--pf-c-progress-stepper--m-vertical__step-main--MarginTop |
Top margin for vertical step main content |
var(--pf-global--spacer--xs, 0.25rem)
|
--pf-c-progress-stepper--m-vertical__step-main--MarginRight |
Right margin for vertical step main content |
0
|
--pf-c-progress-stepper--m-vertical__step-main--MarginBottom |
Bottom margin for vertical step main content |
var(--pf-global--spacer--xl, 2rem)
|
--pf-c-progress-stepper--m-vertical__step-main--MarginLeft |
Left margin for vertical step main content |
var(--pf-global--spacer--xs, 0.25rem)
|
--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns |
Grid template columns for vertical compact layout |
1fr
|
--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow |
Grid row for vertical compact step connector |
auto
|
--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom |
Padding bottom for vertical compact step connector |
var(--pf-global--spacer--xs, 0.25rem)
|
--pf-c-progress-stepper__step-connector--before--Left |
var(--pf-c-progress-stepper--m-center__step-connector--before--Left)
|
|
--pf-c-progress-stepper--m-center__step-connector--before--Left |
Left position for centered step connector pseudo-element |
50%
|
--pf-c-progress-stepper__step-main--MarginTop |
var(--pf-c-progress-stepper--m-compact__step-main--MarginTop)
|
|
--pf-c-progress-stepper--m-compact__step-main--MarginTop |
Top margin for compact step main content |
0
|
--pf-c-progress-stepper--m-compact__step-main--MarginBottom |
Bottom margin for compact step main content |
var(--pf-global--spacer--xs, 0.25rem)
|
--pf-c-progress-stepper--m-compact__step-icon--Width |
Width for compact step icon |
1.125rem
|
--pf-c-progress-stepper--m-compact__step-icon--FontSize |
Font size for compact step icon |
var(--pf-global--icon--FontSize--sm, 0.625rem)
|
--pf-c-progress-stepper--m-compact__step-title--FontSize |
Font size for compact step title |
var(--pf-global--FontSize--sm, 0.875rem)
|
--pf-c-progress-stepper--m-compact__step-title--FontWeight |
Font weight for compact step title |
var(--pf-global--FontWeight--normal, 400)
|
--pf-c-progress-stepper--m-compact__pficon--MarginTop |
Top margin for compact pficon |
2px
|
--pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop |
Top margin for compact exclamation triangle icon |
-3px
|
--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginLeft |
—
|
|
--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight |
Right margin for vertical compact step main content |
0
|
--pf-c-progress-stepper--m-compact--GridTemplateColumns |
—
|
|
--pf-c-progress-stepper--m-compact--GridAutoFlow |
Grid auto flow for compact layout |
row
|
CSS Shadow Parts
None
