Wizard drawer

WizardDrawer offers a way to show some information without creating a dedicated page for it. Usually used for creating a resource in many steps, while staying on the same page.

#Example

#Controlled vs uncontrolled

The wizard drawer may be used controlled or uncontrolled.

#Uncontrolled

When uncontrolled, the wizard drawer will manage the active step internally. If submit throws, then the step will not be incremented. An error function may be used to handle the error of the submit.

#Controlled

To use the wizard drawer controlled, provide an activeStep prop.

When controlled, the active step is managed by the parent component. Use submit and back to manage the step state. An error function may be used to handle the error of the submit.

Note: the first step will not show a back button unless back is provided.

#Close button variant

Use the "icon" close button variant to render an icon button as the exit button. This variant should be used in Journeys, since the other drawers use icon buttons as exit buttons.

#Guidelines

#When to use

• To display a creation flow that doesn't have a dedicated page.

#When not to use

• To display information. Use the Drawer to display information in a drawer.

#Props

#Wizard drawer props

Name	Default	Description
blockBackgroundInteraction	trueeslint-disable-next-line react/boolean-prop-naming	boolean Block scrolling of content behind drawer.
closeOnOverlayClick	falseeslint-disable-next-line react/boolean-prop-naming	boolean Close drawer on overlay click.
closeButtonVariant	"text"	"text" | "icon" Variant of the close button.
isOpen	false	boolean Determines if drawer is open.
title	—	string Title to display at the top of the drawer.
hasOverlay	false	boolean Render overlay.
size	"md"	"sm" | "md" | "lg" | "xl" | "full" Drawer size.
topDisplacement	0	number | string Top displacement of the drawer.
onClose	—	() => void Callback invoked to close the drawer.

#Controlled wizard drawer step props

Name	Default	Description
continue	"Continue"	ReactNode Label or node to display on the continue button. The last step's default is "Save".
submit	—	() => void | Promise<void> Callback invoked when the continue button is clicked.
error	—	(error: unknown) => void | Promise<void> Callback invoked when the submit callback throws.
back	—	() => void Callback invoked when the back button is clicked.

#Uncontrolled wizard drawer step props

Name	Default	Description
continue	"Continue"	string Label to display on the continue button. The last step's default is "Save".
submit	—	() => void | Promise<void> Callback invoked when the continue button is clicked.
error	—	(error: unknown) => void | Promise<void> Callback invoked when the submit callback throws.