Dialog

Dialog

Dialogs are overlaid modal paper based components with a backdrop.

Props

Name Type Default Description
childrenĀ * node Dialog children, usually the included sub-components.
classes object Override or extend the styles applied to the component. See CSS API 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.
maxWidth enum: 'xs' |
 'sm' |
 'md' |
 false
'sm' Determine the max width of the dialog. The dialog width grows with the size of the screen, this property is useful on the desktop where you might need some coherent different width size across your application. 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) => void
event: The event source of the callback
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.
PaperProps object Properties applied to the Paper element.
TransitionComponent union: string |
 func
Fade Transition component.
transitionDuration union: 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 Properties applied to the Transition element.

Any other properties supplied will be spread to the root element.

CSS API

You can override all the class names injected by Material-UI thanks to the classes property. This property accepts the following keys:

  • root
  • paper
  • paperWidthXs
  • paperWidthSm
  • paperWidthMd
  • paperFullWidth
  • paperFullScreen

Have a look at overriding with classes section and the implementation of the component for more detail.

If using the overrides key of the theme as documented here, you need to use the following style sheet name: MuiDialog.

Inheritance

The properties of the Modal component are also available.

Demos