Skip to content
PatternFly logo

Wizard

A wizard provides a guided workflow that offers a path to complete a task, create an object or objects, or finish a series of steps for some other outcome. Wizards should incite trust in the user and guide them through an otherwise overwhelming experience.

A newer React implementation of the wizard will replace the existing implementation at the next major release. The documentation for the newer implementation is under the React next tab, and this newer implementation can be imported from @patternfly/react-core/next.

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 about the process, visit our about page or our Beta components page on GitHub.

PatternFly has two implementations of a Wizard. This newer Wizard takes a more explicit and declarative approach compared to the older implementation, which can be found under the React tab.

Examples

Basic

Step 1 content

Basic with disabled steps

Step 1 content

Anchors for nav items

Step 1: Read about PF3

Incrementally enabled steps

Step 1 content

Expandable steps

Progress after submission

Step 1 content

Enabled on form validation

Information content

Validate on button press

Step 1 content

Progressive steps

Get started content

Get current step

Step 1 content

Within modal

Step drawer content

Step 1 content

Custom navigation

Did you say...custom nav?

You're a wizard, Harry

To be clear, all those not named Harry are not wizards.

Step 1 content

Custom navigation item

Step 1 content

Toggle step visibility

Step error status

Step 1 content

Hooks

useWizardContext

Used to access any property of WizardContext:

import { useWizardContext } from '@patternfly/react-core/next';

const StepContent = () => {
  const { activeStep } = useWizardContext();
  return <>This is the current step: {activeStep}</>;
}

useWizardFooter

Used to set a unique footer for the wizard on any given step. See step 3 of Kitchen sink for a live example.

import { useWizardFooter } from '@patternfly/react-core/next';

const StepContent = () => {
  useWizardFooter(<>Some footer</>);
  return <>Step content</>;
}

Props

Wizard

Wrapper for all steps and hosts state, including navigation helpers, within context. The WizardContext provided by default gives any child of wizard access to those resources.
*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNode | React.ReactNode[]Step components
classNamestringAdditional classes spread to the wizard
footerWizardFooterTypeWizard footer
headerReact.ReactNodeWizard header
heightnumber | stringCustom height of the wizard
isProgressivebooleanfalseProgressively shows steps, where all steps following the active step are hidden. Defaults to false.
isVisitRequiredbooleanfalseDisables steps that haven't been visited. Defaults to false.
navWizardNavTypeWizard navigation
onClose(event: React.MouseEvent<HTMLButtonElement>) => voidCallback function to close the wizard
onSave(event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>Callback function to save at the end of the wizard, if not specified uses onClose
onStepChange( event: React.MouseEvent<HTMLButtonElement>, currentStep: WizardStepType, prevStep: WizardStepType, scope: WizardStepChangeScope ) => void | Promise<void>Callback function when navigating between steps
startIndexnumber1The initial index the wizard is to start on (1 or higher). Defaults to 1.
widthnumber | stringCustom width of the wizard

WizardFooter

Hosts the standard structure of a footer with ties to the active step so that text for buttons can vary from step to step.
*required
NameTypeDefaultDescription
activeSteprequiredWizardStepTypeThe active step
onBackrequired(event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>Back button callback
onCloserequired(event: React.MouseEvent<HTMLButtonElement>) => voidCancel link callback
onNextrequired(event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>Next button callback
backButtonTextReact.ReactNodeCustom text for the Back button
cancelButtonTextReact.ReactNodeCustom text for the Cancel link
isBackDisabledbooleanFlag to disable the back button
isBackHiddenbooleanTrue to hide the Back button
isCancelHiddenbooleanTrue to hide the Cancel button
isNextDisabledbooleanFlag to disable the next button
nextButtonTextReact.ReactNodeCustom text for the Next button. The current step's nextButtonText takes precedence.

WizardFooterWrapper

Applies default wizard footer styling any number of child elements.
*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNode

WizardToggle

Used to toggle between step content, including the body and footer. This is also where the navigation and its expandability is controlled.
*required
NameTypeDefaultDescription
activeSteprequiredWizardStepTypeThe current step
footerrequiredReact.ReactElementWizard footer
navrequiredReact.ReactElement<WizardNavProps>Wizard navigation
stepsrequiredWizardStepType[]List of steps and/or sub-steps
aria-labelstring'Wizard toggle'The expandable dropdown button's aria-label
isNavExpandedbooleanFlag to determine whether the dropdown navigation is expanded
toggleNavExpanded(event: React.MouseEvent<HTMLButtonElement> | KeyboardEvent) => voidCallback to expand or collapse the dropdown navigation

WizardStep

The primary child component for Wizard. Step props are used for the list of steps managed in context.
*required
NameTypeDefaultDescription
idrequiredstring | numberUnique identifier
namerequiredReact.ReactNodeName of the step's navigation item
bodyOmit<Omit<WizardBodyProps, 'children'>, 'children'> | nullProps for WizardBody that wraps content by default. Can be set to null for exclusion of WizardBody.
childrenReact.ReactNode | undefinedOptional for when the step is used as a parent to sub-steps
footerReact.ReactElement | Partial<WizardFooterProps>Replaces the step's footer. The step's footer takes precedance over the wizard's footer.
isDisabledbooleanFlag to disable the step's navigation item
isExpandablebooleanFlag to determine whether parent steps can expand or not. Defaults to false.
isHiddenbooleanFlag to determine whether the step is hidden
navItemWizardNavItemTypeReplaces the step's navigation item or its properties.
status'default' | 'error'Used to determine icon next to the step's navigation item
stepsReact.ReactElement<WizardStepProps>[]Optional list of sub-steps

WizardBody

Used as a wrapper for WizardStep content, where the wrapping element is customizable.
*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNode | React.ReactNode[]
aria-labelstringAn aria-label to use for the wrapper element
aria-labelledbystringSets the aria-labelledby attribute for the wrapper element
componentReact.ElementType'div'Component used as the wrapping content container
hasNoPaddingbooleanfalseSet to true to remove the default body padding

WizardHeader

*required
NameTypeDefaultDescription
titlerequiredstringTitle of the wizard
closeButtonAriaLabelstringAria-label applied to the X (Close) button
descriptionReact.ReactNodeDescription of the wizard
descriptionComponent'div' | 'p''p'Component type of the description
descriptionIdstringid for the description
isCloseHiddenbooleanFlag indicating whether the close button should be in the header
onClose(event: React.MouseEvent<HTMLButtonElement>) => void() => undefinedCallback function called when the X (Close) button is clicked
titleIdstringid for the title

WizardNav

*required
NameTypeDefaultDescription
aria-labelstringAria-label applied to the navigation element
aria-labelledbystringSets the aria-labelledby attribute on the navigation element
childrenanychildren should be WizardNavItem components
isExpandedbooleanfalseWhether the navigation is expanded
isInnerListbooleanfalseTrue to return the inner list without the wrapping navigation element

WizardNavItem

*required
NameTypeDefaultDescription
stepIndexrequirednumberThe step index passed into the onNavItemClick callback
childrenReact.ReactNodenullCan nest a WizardNav component for substeps
component'button' | 'a''button'Component used to render WizardNavItem
contentReact.ReactNode''The content to display in the navigation item
hrefstringAn optional url to use for when using an anchor component
idstring | numberThe id for the navigation item
isCurrentbooleanfalseWhether the navigation item is the currently active item
isDisabledbooleanfalseWhether the navigation item is disabled
isExpandablebooleanfalseFlag indicating that this NavItem has child steps and is expandable
isVisitedbooleanfalseWhether the navigation item has been visited
onClick(event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>, index: number) => anyCallback for when the navigation item is clicked
ouiaSafeNo type infotrue
status'default' | 'error''default'Used to determine the icon displayed next to content. Default has no icon.
targetReact.HTMLAttributeAnchorTargetWhere to display the linked URL when using an anchor component

WizardContextProps

*required
NameTypeDefaultDescription
activeSteprequiredWizardStepTypeCurrent step
closerequired() => voidClose the wizard
footerrequiredReact.ReactElementFooter element
getSteprequired(stepId: number | string) => WizardStepTypeGet step by ID
goToNextSteprequired() => void | Promise<void>Navigate to the next step
goToPrevSteprequired() => void | Promise<void>Navigate to the previous step
goToStepByIdrequired(id: number | string) => voidNavigate to step by ID
goToStepByIndexrequired(index: number) => voidNavigate to step by index
goToStepByNamerequired(name: string) => voidNavigate to step by name
setFooterrequired(footer: React.ReactElement | Partial<WizardFooterProps>) => voidUpdate the footer with any react element
setSteprequired(step: Pick<WizardStepType, 'id'> & Partial<WizardStepType>) => voidSet step by ID
stepsrequiredWizardStepType[]List of steps

WizardBasicStep

Type used to define 'basic' steps, or in other words, steps that are neither parents or children of parents.
*required
NameTypeDefaultDescription
idrequiredstring | numberUnique identifier
indexrequirednumberOrder index of step (starts at 1)
namerequiredReact.ReactNodeName of the step's navigation item
componentReact.ReactElementContent shown when the step's navigation item is selected. When treated as a parent step, only sub-step content will be shown.
footerReact.ReactElement | Partial<WizardFooterProps>Replaces the step's footer. The step's footer takes precedance over the wizard's footer.
isDisabledbooleanFlag to disable the step's navigation item
isHiddenbooleanFlag to determine whether the step is hidden
isVisitedbooleanFlag to represent whether the step has been visited (navigated to)
navItemWizardNavItemTypeReplaces the step's navigation item or its properties.
status'default' | 'error'Used to determine icon next to the step's navItem

WizardParentStep

Type used to define parent steps.
*required
NameTypeDefaultDescription
subStepIdsrequired(string | number)[]Nested step IDs
isExpandablebooleanFlag to determine whether the step can expand or not.

WizardSubStep

Type used to define sub-steps.
*required
NameTypeDefaultDescription
parentIdrequiredstring | numberUnique identifier of the parent step

CSS variables

.pf-c-wizard__header--pf-global--Color--100
#fff
.pf-c-wizard__header--pf-global--Color--200
#f0f0f0
.pf-c-wizard__header--pf-global--BorderColor--100
#b8bbbe
.pf-c-wizard__header--pf-global--primary-color--100
#73bcf7
.pf-c-wizard__header--pf-global--link--Color
#2b9af3
.pf-c-wizard__header--pf-global--link--Color--hover
#2b9af3
.pf-c-wizard__header--pf-global--BackgroundColor--100
#151515
.pf-c-wizard__header .pf-c-card--pf-c-card--BackgroundColor
rgba(#030303, .32)
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--Color
#06c
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--hover--Color
#06c
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--focus--Color
#06c
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--active--Color
#06c
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--BackgroundColor
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--hover--BackgroundColor
#f0f0f0
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--focus--BackgroundColor
#f0f0f0
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--active--BackgroundColor
#f0f0f0
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--Color
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--hover--Color
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--focus--Color
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--active--Color
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--BorderColor
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--hover--BorderColor
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--focus--BorderColor
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--active--BorderColor
#fff
.pf-c-wizard--pf-c-wizard--Height
100%
.pf-c-wizard--pf-c-modal-box--c-wizard--FlexBasis
47.625rem
.pf-c-wizard--pf-c-wizard__header--BackgroundColor
#151515
.pf-c-wizard--pf-c-wizard__header--ZIndex
300
.pf-c-wizard--pf-c-wizard__header--PaddingTop
1.5rem
.pf-c-wizard--pf-c-wizard__header--PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__header--PaddingBottom
1.5rem
.pf-c-wizard--pf-c-wizard__header--PaddingLeft
1rem
.pf-c-wizard--pf-c-wizard__header--lg--PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__header--lg--PaddingLeft
1rem
.pf-c-wizard--pf-c-wizard__header--xl--PaddingRight
1.5rem
.pf-c-wizard--pf-c-wizard__header--xl--PaddingLeft
1.5rem
.pf-c-wizard--pf-c-wizard__close--Top
calc(1.5rem - 0.375rem)
.pf-c-wizard--pf-c-wizard__close--Right
0
.pf-c-wizard--pf-c-wizard__close--xl--Right
1.5rem
.pf-c-wizard--pf-c-wizard__close--FontSize
1.25rem
.pf-c-wizard--pf-c-wizard__title--PaddingRight
3rem
.pf-c-wizard--pf-c-wizard__description--PaddingTop
0.5rem
.pf-c-wizard--pf-c-wizard__description--Color
#f0f0f0
.pf-c-wizard--pf-c-wizard__nav-link--Color
#151515
.pf-c-wizard--pf-c-wizard__nav-link--TextDecoration
none
.pf-c-wizard--pf-c-wizard__nav-link--hover--Color
#06c
.pf-c-wizard--pf-c-wizard__nav-link--focus--Color
#06c
.pf-c-wizard--pf-c-wizard__nav-link--m-current--Color
#06c
.pf-c-wizard--pf-c-wizard__nav-link--m-current--FontWeight
400
.pf-c-wizard--pf-c-wizard__nav-link--m-disabled--Color
#6a6e73
.pf-c-wizard--pf-c-wizard__nav-list__nav-list__nav-link--m-current--FontWeight
400
.pf-c-wizard--pf-c-wizard__nav-link-toggle--PaddingRight
0.5rem
.pf-c-wizard--pf-c-wizard__nav-link-toggle--PaddingLeft
0.5rem
.pf-c-wizard--pf-c-wizard__nav-link-toggle--Color
#6a6e73
.pf-c-wizard--pf-c-wizard__nav-link--hover__nav-link-toggle-icon--Color
#151515
.pf-c-wizard--pf-c-wizard__nav-link--focus__nav-link-toggle-icon--Color
#151515
.pf-c-wizard--pf-c-wizard__nav-link-toggle-icon--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-wizard--pf-c-wizard__nav-link-toggle-icon--Rotate
0
.pf-c-wizard--pf-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate
90deg
.pf-c-wizard--pf-c-wizard__nav-link--before--Width
1.5rem
.pf-c-wizard--pf-c-wizard__nav-link--before--Height
1.5rem
.pf-c-wizard--pf-c-wizard__nav-link--before--Top
0
.pf-c-wizard--pf-c-wizard__nav-link--before--BackgroundColor
#f0f0f0
.pf-c-wizard--pf-c-wizard__nav-link--before--BorderRadius
30em
.pf-c-wizard--pf-c-wizard__nav-link--before--Color
#151515
.pf-c-wizard--pf-c-wizard__nav-link--before--FontSize
0.875rem
.pf-c-wizard--pf-c-wizard__nav-link--before--TranslateX
calc(-100% - 0.5rem)
.pf-c-wizard--pf-c-wizard__nav-link--m-current--before--BackgroundColor
#06c
.pf-c-wizard--pf-c-wizard__nav-link--m-current--before--Color
#fff
.pf-c-wizard--pf-c-wizard__nav-link--m-disabled--before--BackgroundColor
transparent
.pf-c-wizard--pf-c-wizard__nav-link--m-disabled--before--Color
#6a6e73
.pf-c-wizard--pf-c-wizard__toggle--BackgroundColor
#fff
.pf-c-wizard--pf-c-wizard__toggle--ZIndex
300
.pf-c-wizard--pf-c-wizard__toggle--BoxShadow
0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)
.pf-c-wizard--pf-c-wizard__toggle--PaddingTop
1.5rem
.pf-c-wizard--pf-c-wizard__toggle--PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__toggle--PaddingBottom
1.5rem
.pf-c-wizard--pf-c-wizard__toggle--PaddingLeft
calc(1rem + 1.5rem + 0.5rem)
.pf-c-wizard--pf-c-wizard__toggle--m-expanded--BorderBottomWidth
1px
.pf-c-wizard--pf-c-wizard__toggle--m-expanded--BorderBottomColor
#d2d2d2
.pf-c-wizard--pf-c-wizard--m-in-page__toggle--xl--PaddingLeft
calc(2rem + 1.5rem + 0.5rem)
.pf-c-wizard--pf-c-wizard__toggle-num--before--Top
0
.pf-c-wizard--pf-c-wizard__toggle-list-item--not-last-child--MarginRight
0.5rem
.pf-c-wizard--pf-c-wizard__toggle-list-item--MarginBottom
0.25rem
.pf-c-wizard--pf-c-wizard__toggle-list--MarginRight
0.5rem
.pf-c-wizard--pf-c-wizard__toggle-list--MarginBottom
calc(0.25rem * -1)
.pf-c-wizard--pf-c-wizard__toggle-separator--MarginLeft
0.5rem
.pf-c-wizard--pf-c-wizard__toggle-separator--Color
#8a8d90
.pf-c-wizard--pf-c-wizard__toggle-icon--LineHeight
1.5
.pf-c-wizard--pf-c-wizard__toggle--m-expanded__toggle-icon--Rotate
180deg
.pf-c-wizard--pf-c-wizard__nav--ZIndex
200
.pf-c-wizard--pf-c-wizard__nav--BackgroundColor
#fff
.pf-c-wizard--pf-c-wizard__nav--BoxShadow
0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)
.pf-c-wizard--pf-c-wizard__nav--Width
100%
.pf-c-wizard--pf-c-wizard__nav--lg--Width
15.625rem
.pf-c-wizard--pf-c-wizard__nav--lg--BorderRightWidth
1px
.pf-c-wizard--pf-c-wizard__nav--lg--BorderRightColor
#d2d2d2
.pf-c-wizard--pf-c-wizard__nav-list--PaddingTop
1.5rem
.pf-c-wizard--pf-c-wizard__nav-list--PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__nav-list--PaddingBottom
1.5rem
.pf-c-wizard--pf-c-wizard__nav-list--PaddingLeft
calc(1rem + 1.5rem + 0.5rem)
.pf-c-wizard--pf-c-wizard__nav-list--lg--PaddingTop
1rem
.pf-c-wizard--pf-c-wizard__nav-list--lg--PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__nav-list--lg--PaddingBottom
1rem
.pf-c-wizard--pf-c-wizard__nav-list--xl--PaddingTop
1.5rem
.pf-c-wizard--pf-c-wizard__nav-list--xl--PaddingRight
1.5rem
.pf-c-wizard--pf-c-wizard__nav-list--xl--PaddingBottom
1.5rem
.pf-c-wizard--pf-c-wizard__nav-list--xl--PaddingLeft
calc(1.5rem + 1.5rem + 0.5rem)
.pf-c-wizard--pf-c-wizard__nav-list--nested--MarginLeft
1rem
.pf-c-wizard--pf-c-wizard__nav-list--nested--MarginTop
1rem
.pf-c-wizard--pf-c-wizard__nav-item--MarginTop
1rem
.pf-c-wizard--pf-c-wizard__outer-wrap--BackgroundColor
#fff
.pf-c-wizard--pf-c-wizard__outer-wrap--lg--PaddingLeft
100%
.pf-c-wizard--pf-c-wizard__outer-wrap--MinHeight
15.625rem
.pf-c-wizard--pf-c-wizard__main--ZIndex
100
.pf-c-wizard--pf-c-wizard__main-body--PaddingTop
1rem
.pf-c-wizard--pf-c-wizard__main-body--PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__main-body--PaddingBottom
1rem
.pf-c-wizard--pf-c-wizard__main-body--PaddingLeft
1rem
.pf-c-wizard--pf-c-wizard__main-body--xl--PaddingTop
1.5rem
.pf-c-wizard--pf-c-wizard__main-body--xl--PaddingRight
1.5rem
.pf-c-wizard--pf-c-wizard__main-body--xl--PaddingBottom
1.5rem
.pf-c-wizard--pf-c-wizard__main-body--xl--PaddingLeft
1.5rem
.pf-c-wizard--pf-c-wizard__footer--BackgroundColor
#fff
.pf-c-wizard--pf-c-wizard__footer--ZIndex
200
.pf-c-wizard--pf-c-wizard__footer--PaddingTop
1rem
.pf-c-wizard--pf-c-wizard__footer--PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__footer--PaddingBottom
0.5rem
.pf-c-wizard--pf-c-wizard__footer--PaddingLeft
1rem
.pf-c-wizard--pf-c-wizard__footer--xl--PaddingTop
1.5rem
.pf-c-wizard--pf-c-wizard__footer--xl--PaddingRight
1.5rem
.pf-c-wizard--pf-c-wizard__footer--xl--PaddingBottom
1rem
.pf-c-wizard--pf-c-wizard__footer--xl--PaddingLeft
1.5rem
.pf-c-wizard--pf-c-wizard__footer--BoxShadow
0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-wizard--pf-c-wizard__footer--child--MarginRight
1rem
.pf-c-wizard--pf-c-wizard__footer--child--MarginBottom
0.5rem
.pf-c-wizard--pf-c-wizard__footer-cancel--MarginLeft
calc(3rem - 1rem)
.pf-c-wizard.pf-m-finished--pf-c-wizard__outer-wrap--lg--PaddingLeft
0
.pf-c-wizard__toggle.pf-m-expanded--pf-c-wizard__toggle--BoxShadow
none
.pf-c-wizard__toggle-num--pf-c-wizard__nav-link--before--Top
0
.pf-c-wizard__toggle-num--pf-c-wizard__nav-link--before--BackgroundColor
#06c
.pf-c-wizard__toggle-num--pf-c-wizard__nav-link--before--Color
#fff
.pf-c-wizard__nav-item.pf-m-expanded > .pf-c-wizard__nav-link--pf-c-wizard__nav-link-toggle-icon--Rotate
90deg
.pf-c-wizard__nav-link:hover--pf-c-wizard__nav-link--Color
#06c
.pf-c-wizard__nav-link:hover--pf-c-wizard__nav-link-toggle--Color
#151515
.pf-c-wizard__nav-link:focus--pf-c-wizard__nav-link--Color
#06c
.pf-c-wizard__nav-link:focus--pf-c-wizard__nav-link-toggle--Color
#151515
.pf-c-wizard__nav-link.pf-m-current--pf-c-wizard__nav-link--Color
#06c
.pf-c-wizard__nav-link:disabled--pf-c-wizard__nav-link--Color
#6a6e73
.pf-c-wizard__nav-link:disabled::before--pf-c-wizard__nav-link--before--BackgroundColor
transparent
.pf-c-wizard__nav-link:disabled::before--pf-c-wizard__nav-link--before--Color
#6a6e73

View source on GitHub