Layout

Modal Wizard

A modal wizard guides users through a task by presenting a succession of actions to complete.

View source

Props

NameTypeDefaultDescription
idrequiredstring
A unique identifier that will be used to identify the modal in the PlasmaState. Among other things this is the identifer that will be used to open the wizard.
cancelButtonLabelstring"Cancel"
The label of the cancel button
childrenReactNode
classesIClassName
closeCallback() => void
closeTimeoutnumber
contentClassesIClassName
Additionnal CSS class to add to the modal container
contentRef(el: HTMLDivElement) => void
docLinkILinkSvgProps
Props of the link to documentation
finishButtonLabelstring"Finish"
The label of the finish button
htmlIdstring
id for the html element
isDirtyboolean
Whether the wizard should warn about unsaved changes when the user unexpectedly closes the modal
isPromptbooleanfalse
Wheter this backdrop is for a prompt or not
modalBodyClassesIClassName
Additionnal CSS class to add to the body
modalFooterChildrenReactNode | DependsOnStep<ReactNode>
Determines what needs to be rendered in the modal footer. The content of the footer can be dependent on the current step by using a render function
modalFooterClassesIClassName
Additionnal CSS class to add to the footer
modalHeaderChildrenReactNode
React child to add to the header
modalHeaderClassesIClassName
Additionnal CSS class to add to the header
nextButtonLabelstring"Next"
The label of the next button
onCancel() => unknown
A callback function that is executed when the user clicks on the cancel button
onFinish(close: () => void) => unknown
A function that is executed when user completes all the steps.
  • closeA function that closes the modal when called.
onNext() => unknown
A callback function that is executed when the user clicks on the next button
onPrevious() => unknown
A callback function that is executed when the user clicks on the previous button
openOnMountboolean
Renders the Modal already opened.
previousButtonLabelstring"Previous"
The label of the previous button
titlestring | DependsOnStep<string>
The title of the modal. The title can be dependent on the current step if needed, to do so pass in a function that accepts the same params as the validateStep prop.
validateStepDependsOnStep<{ isValid: boolean; message?: string; }>() => ({isValid: true})
A function that determines whether the current step is valid or not
  • currentStepThe step at is currently displayed in the wizard
  • numberOfStepsThe total number of steps to reach completion of the wizard. Useful to know if the current step is the last step.
displayFordeprecatedstring[]
Do not use

Examples

No guidelines exist for ModalWizard yet.

Create guidelines