Modal

Modal UI Component

Demo

API

PropertyDescriptionTypeDefaultVersion
afterCloseSpecify a function that will be called when modal is closed completely.function-
bodyStyleBody style for modal body element. Such as height, padding etc.object{}
cancelTextText of the Cancel buttonstring / ReactNodeCancel
centeredCentered ModalBooleanfalse
closableWhether a close (x) button is visible on top right of the modal dialog or notbooleantrue
closeIconcustom close iconReactNode-
confirmLoadingWhether to apply loading visual effect for OK button or notbooleanfalse
destroyOnCloseWhether to unmount child components on onClosebooleanfalse
footerFooter content, set as footer={null} when you don't need default buttonsstring / ReactNodeOK and Cancel buttons
forceRenderForce render Modalbooleanfalse
getContainerReturn the mount node for ModalHTMLElement / () => HTMLElement / Selectors /falsedocument.body
maskWhether show mask or not.Booleantrue
maskClosableWhether to close the modal dialog when the mask (area outside the modal) is clickedbooleantrue
maskStyleStyle for modal's mask element.object{}
okTextText of the OK buttonstring / ReactNodeOK
okTypeButton type of the OK buttonstringprimary
okButtonPropsThe ok button propsButtonProps-
cancelButtonPropsThe cancel button propsButtonProps-
styleStyle of floating layer, typically used at least for adjusting the position.object-
titleThe modal dialog's titlestring / ReactNode-
titleContainerStyleThe modal title's container styles objectReact.CSSProperties / undefined-
descriptionThe modal dialog's descriptionstring-
sizeThe modal sizesmall / medium / large / extraLarge/ fullSize.-
visibleWhether the modal dialog is visible or notbooleanfalse
widthWidth of the modal dialogstring / number520
wrapClassNameThe class name of the container of the modal dialogstring-
zIndexThe z-index of the ModalNumber1000
onCancelSpecify a function that will be called when a user clicks mask, close button on top right or Cancel buttonfunction(e)-
onOkSpecify a function that will be called when a user clicks the OK buttonfunction(e)-
headerActionsAppend additional content to header actions spaceReact.ReactNode-
bodyBackgroundSet color for body of modalwhite / greywhite
textsLabels to render{ okButton: string; cancelButton: string }{ okButton: 'Apply', cancelButton: 'Cancel' }
blankModal with header which contains only close buttonBooleanfalse