---
filename: /packages/material-ui/src/Dialog/Dialog.js
---
# Dialog API
The API documentation of the Dialog React component. Learn more about the props and the CSS customization points.
## Import
```js
import Dialog from '@material-ui/core/Dialog';
// or
import { Dialog } from '@material-ui/core';
```
You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
Dialogs are overlaid modal paper based components with a backdrop.
## Component name
The `MuiDialog` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
## Props
| Name | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| 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. |
| children | node | | Dialog children, usually the included sub-components. |
| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| disableBackdropClick | bool | false | If `true`, clicking the backdrop will not fire the `onClose` callback. |
| disableEscapeKeyDown | bool | false | If `true`, hitting escape will not fire the `onClose` callback. |
| fullScreen | bool | false | If `true`, the dialog will be full-screen |
| fullWidth | bool | false | If `true`, the dialog stretches to `maxWidth`.
Notice that the dialog width grow is limited by the default margin. |
| maxWidth | 'lg'
| 'md'
| 'sm'
| 'xl'
| 'xs'
| false | 'sm' | Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to `false` to disable `maxWidth`. |
| onBackdropClick | func | | Callback fired when the backdrop is clicked. |
| onClose | func | | Callback fired when the component requests to be closed.
**Signature:**
`function(event: object, reason: string) => void`
*event:* The event source of the callback.
*reason:* Can be: `"escapeKeyDown"`, `"backdropClick"`. |
| onEnter | func | | Callback fired before the dialog enters. |
| onEntered | func | | Callback fired when the dialog has entered. |
| onEntering | func | | Callback fired when the dialog is entering. |
| onEscapeKeyDown | func | | Callback fired when the escape key is pressed, `disableKeyboard` is false and the modal is in focus. |
| onExit | func | | Callback fired before the dialog exits. |
| onExited | func | | Callback fired when the dialog has exited. |
| onExiting | func | | Callback fired when the dialog is exiting. |
| open* | bool | | If `true`, the Dialog is open. |
| PaperComponent | elementType | Paper | The component used to render the body of the dialog. |
| PaperProps | object | {} | Props applied to the [`Paper`](/api/paper/) element. |
| scroll | 'body'
| 'paper' | 'paper' | Determine the container for scrolling the dialog. |
| TransitionComponent | elementType | Fade | The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. |
| transitionDuration | number
| { appear?: number, enter?: number, exit?: number } | { enter: duration.enteringScreen, exit: duration.leavingScreen } | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
| TransitionProps | object | | Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. |
The `ref` is forwarded to the root element.
Any other props supplied will be provided to the root element ([Modal](/api/modal/)).
## CSS
| Rule name | Global class | Description |
|:-----|:-------------|:------------|
| root | .MuiDialog-root | Styles applied to the root element.
| scrollPaper | .MuiDialog-scrollPaper | Styles applied to the container element if `scroll="paper"`.
| scrollBody | .MuiDialog-scrollBody | Styles applied to the container element if `scroll="body"`.
| container | .MuiDialog-container | Styles applied to the container element.
| paper | .MuiDialog-paper | Styles applied to the `Paper` component.
| paperScrollPaper | .MuiDialog-paperScrollPaper | Styles applied to the `Paper` component if `scroll="paper"`.
| paperScrollBody | .MuiDialog-paperScrollBody | Styles applied to the `Paper` component if `scroll="body"`.
| paperWidthFalse | .MuiDialog-paperWidthFalse | Styles applied to the `Paper` component if `maxWidth=false`.
| paperWidthXs | .MuiDialog-paperWidthXs | Styles applied to the `Paper` component if `maxWidth="xs"`.
| paperWidthSm | .MuiDialog-paperWidthSm | Styles applied to the `Paper` component if `maxWidth="sm"`.
| paperWidthMd | .MuiDialog-paperWidthMd | Styles applied to the `Paper` component if `maxWidth="md"`.
| paperWidthLg | .MuiDialog-paperWidthLg | Styles applied to the `Paper` component if `maxWidth="lg"`.
| paperWidthXl | .MuiDialog-paperWidthXl | Styles applied to the `Paper` component if `maxWidth="xl"`.
| paperFullWidth | .MuiDialog-paperFullWidth | Styles applied to the `Paper` component if `fullWidth={true}`.
| paperFullScreen | .MuiDialog-paperFullScreen | Styles applied to the `Paper` component if `fullScreen={true}`.
You can override the style of the component thanks to one of these customization points:
- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
- With a theme and an [`overrides` property](/customization/globals/#css).
If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Dialog/Dialog.js) for more detail.
## Inheritance
The props of the [Modal](/api/modal/) component are also available.
You can take advantage of this behavior to [target nested components](/guides/api/#spread).
## Demos
- [Dialogs](/components/dialogs/)