Skip to main content

Dialogs

Please refer to MUI's official docs for more details on component's usage guide and API documentation.

Basic

Manage open prop with the help of a state.

Selected: user02@gmail.com


Alerts

Show an alert to the user to convey something or make the user choose from the given options.



Transitions

You can also use any of the transitions that you like. Use TransitionComponent prop for the transition.



Form Dialog

Form dialogs allow users to fill out form fields within a dialog.



Customized Dialog

You can customize the component the way you want using styled hook.



Full Screen Dialog

Add fullScreen prop with Dialog component for a full screen dialog.



Optional Sizes

You can set a dialog maximum width by using the maxWidth enumerable in combination with the fullWidth boolean. When thefullWidth property is true, the dialog will adapt based on the maxWidth value.



Responsive full-screen

Make a full screen dialog at particular screen sizes only by using useMediaQuery hook.



Confirmation Dialog

Use disableEscapeKeyDown prop to disable 'Escape' key and use onClose prop to disable the backdrop.



Scrolling Long Content

scroll=paper scrolls within the paper element and scroll=body scrolls within the body element.