Dialog
Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
A Dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.
Dialogs are purposefully interruptive, so they should be used sparingly.
Basic dialog
Simple dialogs can provide additional details or actions about a list item. For example, they can display avatars, icons, clarifying subtext, or orthogonal actions (such as adding an account).
Touch mechanics:
- Choosing an option immediately commits the option and closes the menu
- Touching outside of the dialog, or pressing Back, cancels the action and closes the dialog
<Typography variant="subtitle1" component="div">
Selected: {selectedValue}
</Typography>
<br />
<Button variant="outlined" onClick={handleClickOpen}>
Open simple dialog
</Button>
<SimpleDialog
selectedValue={selectedValue}
open={open}
onClose={handleClose}
/>
Alerts
Alerts are urgent interruptions, requiring acknowledgement, that inform the user about a situation.
Most alerts don't need titles. They summarize a decision in a sentence or two by either:
- Asking a question (e.g. "Delete this conversation?")
- Making a statement related to the action buttons
Use title bar alerts only for high-risk situations, such as the potential loss of connectivity. Users should be able to understand the choices based on the title and button text alone.
If a title is required:
- Use a clear question or statement with an explanation in the content area, such as "Erase USB storage?".
- Avoid apologies, ambiguity, or questions, such as "Warning!" or "Are you sure?"
Form dialogs
Form dialogs allow users to fill out form fields within a dialog. For example, if your site prompts for potential subscribers to fill in their email address, they can fill out the email field and touch 'Submit'.
Customized dialogs
Here is an example of customizing the component. You can learn more about this in the overrides documentation page.
The dialog has a close button added to aide usability.
Optional sizes
You can set a dialog maximum width by using the maxWidth
enumerable in combination with the fullWidth
boolean.
When the fullWidth
prop is true, the dialog will adapt based on the maxWidth
value.
Responsive full-screen
You may make a dialog responsively full screen using useMediaQuery
.
import useMediaQuery from '@material-ui/core/useMediaQuery';
function MyComponent() {
const theme = useTheme();
const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
return <Dialog fullScreen={fullScreen} />;
}
Confirmation dialogs
Confirmation dialogs require users to explicitly confirm their choice before an option is committed. For example, users can listen to multiple ringtones but only make a final selection upon touching "OK".
Touching "Cancel" in a confirmation dialog, or pressing Back, cancels the action, discards any changes, and closes the dialog.
Draggable dialog
You can create a draggable dialog by using react-draggable.
To do so, you can pass the imported Draggable
component as the PaperComponent
of the Dialog
component.
This will make the entire dialog draggable.
Scrolling long content
When dialogs become too long for the user's viewport or device, they scroll.
scroll=paper
the content of the dialog scrolls within the paper element.scroll=body
the content of the dialog scrolls within the body element.
Try the demo below to see what we mean:
Performance
Follow the Modal performance section.
Limitations
Follow the Modal limitations section.
Accessibility
Follow the Modal accessibility section.