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
| Prop | Description | Default |
|---|---|---|
className | The CSS class name for the root element of the component.string | |
innerClassName | The CSS class name for the inner content element of the component.string | |
contentClassName | The CSS class name for the content of the component.string | |
size | The size of the dialog. Can be a string or a number.string | number | 50% |
showCloseButton | Whether to show the close button in the dialog header.boolean | true |
children | The content of the dialog.any | |
disablePadding | Whether to disable padding for the dialog content.boolean | false |
footer | The footer of the dialog.any | |
header | The header of the dialog.any | |
headerElement | The React element for the dialog header.ReactElement<DialogHeaderProps, FC<DialogHeaderProps>> | <DialogHeader /> |
theme | Theme for the Dialog.DialogTheme | |
open * | If true, the global overlay is open.boolean | |
closeOnBackdropClick | If true, the global overlay will close when the backdrop is clicked.boolean | true |
hasBackdrop | If true, the global overlay will have a backdrop.boolean | true |
backdropClassName | The CSS class name to be applied to the backdrop of the global overlay.string | |
closeOnEscape | If true, the global overlay will close when the escape key is pressed.boolean | true |
onClose | A function that is called when the global overlay is closed.() => void |