React Dialogs contain text and UI controls focused on a specific task

Use in your code Learn more

React Dialogs contain text and UI controls focused on a specific task. They inform users about critical information, require users to make decisions, or involve multiple tasks. Dialog can only be a controlled component. You must provide the open prop and handle onRequestClose in order to use this component. More information at material-ui.com

NameTypeDescription
actionsPropTypes.node

Action buttons to display below the Dialog content (children). This property accepts either a React element, or an array of React elements.

actionsContainerClassNamePropTypes.string

The className to add to the actions container’s root element.

actionsContainerStylePropTypes.object

Overrides the inline-styles of the actions container’s root element.

autoDetectWindowHeightPropTypes.bool

If set to true, the height of the Dialog will be auto detected. A max height will be enforced so that the content does not extend beyond the viewport.

autoScrollBodyContentPropTypes.bool

If set to true, the body content of the Dialog will be scrollable.

bodyClassNamePropTypes.string

The className to add to the content’s root element under the title.

bodyStylePropTypes.object

Overrides the inline-styles of the content’s root element under the title.

containerStylePropTypes.object

The contents of the Dialog.

classNamePropTypes.string

The css class name of the root element.

contentClassNamePropTypes.string

The className to add to the content container.

contentStylePropTypes.object

Overrides the inline-styles of the content container.

modalPropTypes.bool

Force the user to use one of the actions in the Dialog. Clicking outside the Dialog will not trigger the onRequestClose.

onRequestClosePropTypes.func

Fired when the Dialog is requested to be closed by a click outside the Dialog or on the buttons.

openPropTypes.bool.isRequired

Controls whether the Dialog is opened or not.

overlayClassNamePropTypes.string

The className to add to the Overlay component that is rendered behind the Dialog.

overlayStylePropTypes.object

Overrides the inline-styles of the Overlay component that is rendered behind the Dialog.

repositionOnUpdatePropTypes.bool

Determines whether the Dialog should be repositioned when it’s contents are updated.

stylePropTypes.object

Override the inline-styles of the root element.

titlePropTypes.node

The title to display on the Dialog. Could be number, string, element or an array containing these types.

titleClassNamePropTypes.string

The className to add to the title’s root container element.

titleStylePropTypes.object

Overrides the inline-styles of the title’s root container element.

Test Summary

<Dialog /> appends a dialog to the document bodyTests didn't run
<Dialog /> registers events on dialog actionsTests didn't run