Skip to content
PatternFly

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 has replaced the now deprecated implementation. The documentation for the deprecated implementation is under the React deprecated tab, and this deprecated implementation can be imported from @patternfly/react-core/deprecated.

Examples

Basic

The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role of "region", and an aria-label or aria-labelledby to be applied.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. Duis lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor, enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et libero a auctor.

Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem, commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in odio nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus dolor.

Focus content on next/back

To focus the main content element of the Wizard, pass in the shouldFocusContent property. It is recommended that this is passed in so that users can navigate through a WizardStep content in order.

If a WizardStep is passed a body={null} property, you must manually handle focus.

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';

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.

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

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.ReactNodeStep 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
navAriaLabelstringAria-label for the Nav
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
shouldFocusContentBetabooleanfalseFlag indicating whether the wizard content should be focused after the onNext or onBack callbacks are called.
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
backButtonPropsOmit<WizardFooterButtonProps, 'isDisabled'>Additional props for the Back button.
backButtonTextReact.ReactNodeCustom text for the Back button
cancelButtonPropsWizardFooterButtonPropsAdditional props for the Cancel button.
cancelButtonTextReact.ReactNodeCustom text for the Cancel link
classNamestringAdditional classes spread to the wizard footer
isBackDisabledbooleanFlag to disable the back button
isBackHiddenbooleanFlag to hide the back button
isCancelHiddenbooleanFlag to hide the cancel button
isNextDisabledbooleanFlag to disable the next button
nextButtonPropsOmit<WizardFooterButtonProps, 'isDisabled' | 'type'>Additional props for 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
classNamestring

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.ReactNodeAnything that can be rendered in the Wizard body
aria-labelstringAdds an accessible name to the wrapper element when the content overflows and renders a scrollbar.
aria-labelledbystringAdds an accessible name to the wrapper element by passing the the id of one or more elements. The aria-labelledby will only be applied when the content overflows and renders a scrollbar.
classNamestringAdditional classes spread to the wizard body
componentReact.ElementType'div'Component used as the wrapping content container
hasNoPaddingbooleanfalseFlag to remove the default body padding

WizardHeader

*required
NameTypeDefaultDescription
titlerequiredstringTitle of the wizard
classNamestringAdditional classes spread to the wizard header
closeButtonAriaLabelstringAria-label applied to the X (Close) button
descriptionReact.ReactNodeDescription of the wizard
descriptionComponent'div' | 'p''div'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
classNamestringAdditional classes spread to the wizard nav
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
classNamestringAdditional classes spread to the wizard nav item
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
mainWrapperRefrequiredReact.RefObject<HTMLElement>Ref for main wizard content element.
setFooterrequired(footer: React.ReactElement | Partial<WizardFooterProps>) => voidUpdate the footer with any react element
setSteprequired(step: Pick<WizardStepType, 'id'> & Partial<WizardStepType>) => voidSet step by ID
shouldFocusContentrequiredbooleanFlag indicating whether the wizard content should be focused after the onNext or onBack callbacks are called.
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

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

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines