dialog

Import

import Dialog from '@mui/material/Dialog';
// or
import { Dialog } from '@mui/material';

Learn about the difference by reading this guide on minimizing bundle size.

Dialogs are overlaid modal paper based components with a backdrop.

Props of the Modal component are also available.

Props

Name	Type	Default	Description
open*	bool	-	If true, the component is shown.
aria-describedby	string	-	The id(s) of the element(s) that describe the dialog.
aria-labelledby	string	-	The id(s) of the element(s) that label the dialog.
aria-modal	‘false’ | ‘true’ | bool	true	Informs assistive technologies that the element is modal.
BackdropComponent	elementType	styled(Backdrop)	A backdrop component. This prop enables custom backdrop rendering.
children	node	-	Dialog children, usually the included sub-components.
classes	object	-	Override or extend the styles applied to the component.
disableEscapeKeyDown	bool	false	If true, hitting escape will not fire the onClose callback.
fullScreen	bool	false	If true, the dialog is full-screen.
fullWidth	bool	false	If true, the dialog stretches to maxWidth.
maxWidth	‘xs’ | ‘sm’ | ‘md’ | ‘lg’ | ‘xl’ | false | string	‘sm’	Determine the max-width of the dialog.
onBackdropClick	func	-	Callback fired when the backdrop is clicked.
onClose	func	-	Callback fired when the component requests to be closed.
PaperComponent	elementType	Paper	The component used to render the body of the dialog.
PaperProps	object	{}	Props applied to the Paper element.
scroll	‘body’ | ‘paper’	‘paper’	Determine the container for scrolling the dialog.
sx	Array<func | object | bool> | func | object	-	The system prop that allows defining system overrides and additional CSS styles.
TransitionComponent	elementType	Fade	The component used for the transition.
transitionDuration	number | { appear?: number, enter?: number, exit?: number }	{ enter, exit }	The duration for the transition, in milliseconds.
TransitionProps	object	-	Props applied to the transition element.

The ref is forwarded to the root element.

Inheritance

While not explicitly documented above, the props of the Modal component are also available in Dialog.

Theme Default Props

You can use MuiDialog to change the default props of this component with the theme.

CSS Classes

Class name	Rule name	Description
.MuiDialog-container	container	Styles applied to the container element.
.MuiDialog-paper	paper	Styles applied to the Paper component.
.MuiDialog-paperFullScreen	paperFullScreen	Styles applied if fullScreen={true}.
.MuiDialog-paperFullWidth	paperFullWidth	Styles applied if fullWidth={true}.
.MuiDialog-paperScrollBody	paperScrollBody	Styles applied if scroll="body".
.MuiDialog-paperScrollPaper	paperScrollPaper	Styles applied if scroll="paper".
…	…	(Other width and scroll-related classes)

You can override the style of the component using:

• A global class name
• A rule name in the component’s styleOverrides

Source Code

View implementation