Material-UI Material Design Dialogs

Comprehensive Material Design dialogs for the popular React framework Material-UI

Dialogs

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

Usage

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.

When to use

Dialogs should be used for:

• Errors that block an app’s normal operation
• Critical information that requires a specific user task, decision, or acknowledgement

Component | Priority | User action ------------ | ------------- | ------------- Snackbar | Low priority | Optional: Snackbars disappear automatically Banner | Prominent, medium priority | Optional: Banners remain until dismissed by the user, or if the state that caused the banner is resolved Dialog | Highest priority | Required: Dialogs block app usage until the user takes a dialog action or exits the dialog (if available)

Types

Alert dialog

Alert dialogs interrupt users with urgent information, details, or actions.

Simple dialog

Simple dialogs display a list of items that take immediate effect when selected.

Confirmation dialog

Confirmation dialogs require users to confirm a choice before the dialog is dismissed.

Title

A dialog’s purpose should be communicated by its title and button text.

Titles should:

• Contain a brief, clear statement or question
• Avoid apologies (“Sorry for the interruption”), alarm (“Warning!”), or ambiguity (“Are you sure?”)

Do

This dialog title poses a specific question, concisely explains what’s involved in the request, and provides clear actions.

Don’t

Don’t use dialog titles that pose an ambiguous question.

Buttons

Side-by-side buttons (Recommended)

Side-by-side buttons display two text buttons next to one another.

These side-by-side buttons display buttons provide the actions of “Disagree” and “Agree” as options.

Stacked full-width buttons

Stacked buttons accommodate longer button text. Confirming actions appear above dismissive actions.