Layout

Modal Window

A modal appears over the current context to have users focus on a particular task or information.

View source

Props

NameTypeDefaultDescription
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
htmlIdstring
id for the html element
idstring
isOpenedboolean
isPromptbooleanfalse
Wheter this backdrop is for a prompt or not
layernumber
modalBodyChildrenReactNode
React child to add to the body
modalBodyClassesIClassName
Additionnal CSS class to add to the body
modalFooterChildrenReactNode
React child to add to the footer
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
onClose() => void
onDestroy() => void
onRender() => void
openOnMountboolean
Renders the Modal already opened.
titleReactNode
Title of the modal
validateShouldNavigate(isDirty: boolean) => boolean
Function that will be called before the modal is closed
  • isDirtyhas the modal changed
withReduxStatebooleantrue if using a connected component, false otherwise
Wheter this component is connected to the state or not
displayFordeprecatedstring[]
Do not use

Examples

No guidelines exist for ModalCompositeConnected yet.

Create guidelines