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.
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.
While not explicitly documented above, the props of the Modal component are also available in Dialog.
You can use MuiDialog
to change the default props of this component with the theme.
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:
styleOverrides