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.

#

#

#

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

#

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

#

#

Name	Default	Description
`blockBackgroundInteraction`	`true`	`boolean` Block scrolling of content behind drawer.
`isOpen`	`false`	`boolean` Determines if drawer is open.
`title`	—	`string` Title to display at the top of the drawer.
`showOverlay`	`false`	`boolean` Render overlay.
`size`	`"md"`	`"sm" \| "md" \| "lg" \| "xl" \| "full"` Drawer size.
`steps`	—	`WizardDrawerStep[]` The steps of the wizard.
`onClose`	—	`() => void` Callback invoked to close the drawer.
`onSubmit`	—	`() => void \| Promise<void>` Callback invoked on submission of the drawer.

#

Name	Default	Description
`isDisabled`	`false`	`boolean` Whether the next step is disabled.
`label`	—	`string` The step label.
`tooltip`	—	`string` Tooltip to display on the continue button.
`continueLabel`	`"Continue"`	`string` Label to display on the primary button. The last step's default is "Save".
`onContinue`	—	`() => void \| Promise<void>` Callback invoked when the user clicks the primary button. If this is not provided, the primary button will only increase the step.
`render`	—	`FC` The step content.

On this page

Example
Guidelines

When to use
When not to use
Props
Wizard drawer props
Wizard drawer step props