Docs
πŸ—οΈ ⏐ Components
Layers
Dialog

Dialog

The Dialog component serves as a pop-up or modal window that overlays the main content, allowing the display of important messages, forms, or user interactions while grabbing user's focus.

Examples

Basic Dialog

Dialog with Footer and Custom header

Theme

This component uses the following default theme:

  • root{}(5 keys)
      Show all

Learn more about how to customize in the Theme documentation.

API

PropDescriptionDefault
classNameThe CSS class name for the root element of the component.
string
innerClassNameThe CSS class name for the inner content element of the component.
string
contentClassNameThe CSS class name for the content of the component.
string
sizeThe size of the dialog. Can be a string or a number.
string | number
50%
showCloseButtonWhether to show the close button in the dialog header.
boolean
true
childrenThe content of the dialog.
any
disablePaddingWhether to disable padding for the dialog content.
boolean
false
footerThe footer of the dialog.
any
headerThe header of the dialog.
any
headerElementThe React element for the dialog header.
ReactElement<DialogHeaderProps, FC<DialogHeaderProps>>
<DialogHeader />
themeTheme for the Dialog.
DialogTheme
open *If true, the global overlay is open.
boolean
closeOnBackdropClickIf true, the global overlay will close when the backdrop is clicked.
boolean
true
hasBackdropIf true, the global overlay will have a backdrop.
boolean
true
backdropClassNameThe CSS class name to be applied to the backdrop of the global overlay.
string
closeOnEscapeIf true, the global overlay will close when the escape key is pressed.
boolean
true
onCloseA function that is called when the global overlay is closed.
() => void