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.

Principles

Dialogs focus user attention to ensure their content is addressed. Dialogs should be direct in communicating information and dedicated to completing a task. Dialogs should...

Read More

Focused

Dialogs focus user attention to ensure their content is addressed.

Direct

Dialogs should be direct in communicating information and dedicated to completing a task.

Helpful

Dialogs should appear in response to a user task or an action, with relevant or contextual information.

When to use

Dialogs should be used for: A banner displays a prominent message and related optional actions. Related Article arrow_downward Snackbars provide brief feedback about an operation...

Read More

Types

Alert dialogs interrupt users with urgent information, details, or actions. Simple dialogs display a list of items that take immediate effect when selected. Confirmation dialogs...

Read More

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.

Full-screen dialog

Full-screen dialogs fill the entire screen, containing actions that require a series of tasks to complete.


Anatomy

  1. Container

  2. Title (optional)

  3. Supporting text

  4. Buttons

  5. Scrim

Dialog box and scrim

A dialog is a type of modal window. Access to the rest of the UI is disabled until the modal is addressed. All modal surfaces...

Read More

A dialog is a type of modal window. Access to the rest of the UI is disabled until the modal is addressed. All modal surfaces are interruptive by design – their purpose is to have the user focus on content on a surface that appears in front of all other surfaces.

To express that the rest of the app is inaccessible, and to focus attention on the dialog, surfaces behind the dialog are scrimmed. A scrim is a temporary treatment that can be applied to Material surfaces for the purpose of making content on the surface less prominent.

Title

Dialog title and button text should communicate the purpose of any dialog.

Read More

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

Dialogs can have buttons side-by-side, and stacked in full width.

Read More

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.

Elevation

Dialogs are at 24dp elevation, above other content.

Read More

Dialogs are displayed at 24dp elevation and can display a shadow. They appear above other content and typically have a scrim below them that covers all app content.


Behavior

Interaction

Dialogs appear without warning, requiring users to stop their current task. They should be used sparingly, as not every choice or setting warrants interruption.

Read More

Dialogs appear without warning, requiring users to stop their current task. They should be used sparingly, as not every choice or setting warrants interruption.

Position

Dialogs retain focus until dismissed or an action has been taken, such as choosing a setting. They shouldn’t be obscured by other elements or appear...

Read More

Dialogs retain focus until dismissed or an action has been taken, such as choosing a setting. They shouldn’t be obscured by other elements or appear partially on screen, with the exception of full-screen dialogs.

Scrolling

Most dialog content should avoid scrolling. When scrolling is required, the dialog title is pinned at the top, with buttons pinned at the bottom. This...

Read More

Most dialog content should avoid scrolling. When scrolling is required, the dialog title is pinned at the top, with buttons pinned at the bottom. This ensures selected content remains visible alongside the title and buttons, even upon scroll.

Dialogs don’t scroll with elements outside of the dialog, such as the background.

When viewing a scrollable list of options, the dialog title and buttons remain fixed.

Dismissing dialogs

Dialogs may be dismissed by: If the user’s ability to dismiss a dialog is disabled, the user must choose a dialog action to proceed.

Read More

Dialogs may be dismissed by:

  • Tapping outside of the dialog
  • Tapping the “Cancel” button
  • Tapping the system back button (Android only)

If the user’s ability to dismiss a dialog is disabled, the user must choose a dialog action to proceed.


Actions

Types of actions

Dialogs present a distinct choice to users through their title, content, and actions. Dialog actions are represented as buttons and allow users confirm or dismiss...

Read More

Dialogs present a distinct choice to users through their title, content, and actions. Dialog actions are represented as buttons and allow users confirm or dismiss something.

There are three types of dialog actions:

Confirming actions

To resolve what triggered the dialog, confirming actions confirm a proposed action. These actions can involve removing something, such as “Delete” or “Remove,” if it suits the context. They are placed on the right side of the screen.

Dismissive actions

Dismissive actions dismiss a proposed action, and return the user to the originating screen or step. They are placed directly to the left of a confirming action.

Acknowledgement actions

When user acknowledgement is required to proceed, a single action may be presented. Alternatively, use a snackbar to communicate this type of information.

Do.

Disable confirming actions (1) until a choice is made. Dismissive actions are never disabled.

Don’t.

Dismissive actions (1) are placed to the left of confirming actions.

Do.

A single action may be provided only if it’s an acknowledgement.

Don’t.

Avoid presenting users with unclear choices. “Cancel” doesn't make sense here because no clear action is proposed.

Number of actions

Dialogs should contain a maximum of two actions. Rather than adding a third action, an inline expansion can display more information. If more extensive information...

Read More

Dialogs should contain a maximum of two actions.

  • If a single action is provided, it must be an acknowledgement action.
  • If two actions are provided, one must be a confirming action, and the other a dismissing action.
  • Providing a third action such as “Learn more” is not recommended as it navigates the user away from the dialog, leaving the dialog task unfinished.

Rather than adding a third action, an inline expansion can display more information. If more extensive information is needed, provide it prior to entering the dialog.

Don’t.

The “Learn more” action (1) navigates away from this dialog, potentially leaving it in an indeterminate state.


Alert dialog

Usage

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

Read More

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

Behavior

To close an alert dialog, one of its actions must be selected.

Read More

To close an alert dialog, one of its actions must be selected.

Do.

The action “Discard” indicates the outcome of the decision.

Don’t.

Don’t use action text that fails to indicate what the selection will do. “Cancel” and “Delete” better indicate what will occur in this dialog.


Simple dialog

Usage

Simple dialogs can display items that are immediately actionable when selected. They don’t have text buttons. As simple dialogs are interruptive, they should be used...

Read More

Simple dialogs can display items that are immediately actionable when selected. They don’t have text buttons.

As simple dialogs are interruptive, they should be used sparingly. Alternatively, dropdown menus provide options in a non-modal, less disruptive way.

Behavior

A simple dialog allows the following interactions: Simple dialogs allow users to act on selected elements, without action text. For example, users can simply select...

Read More

A simple dialog allows the following interactions:

  • Tap an action to choose it and close the dialog
  • Tap outside the dialog to close the dialog without taking an action

A simple dialog

Simple dialogs without actions

Simple dialogs allow users to act on selected elements, without action text. For example, users can simply select a list item to take action on it.

Don’t.

Don’t display text buttons in simple dialogs. The choice itself is actionable when tapped.

Don’t.

Don’t include dismissive actions like “Cancel” in a simple dialog. Users can tap anywhere outside the dialog to close it.


Confirmation dialog

Usage

Confirmation dialogs give users the ability to provide final confirmation of a choice before committing to it, so they have a chance to change their...

Read More

Confirmation dialogs give users the ability to provide final confirmation of a choice before committing to it, so they have a chance to change their minds if necessary.

If the user confirms a choice, it’s carried out. Otherwise, the user can dismiss the dialog. For example, users can listen to multiple ringtones but only make a final selection upon touching “OK.”

Behavior

To confirm a choice, the user taps a confirmation action. To cancel, the user taps a dismissive action.

Read More

To confirm a choice, the user taps a confirmation action. To cancel, the user taps a dismissive action.

The user must either confirm a choice or dismiss the dialog before proceeding.

Buttons

Confirmation dialogs provide both confirmation and cancel buttons. After a confirmation button is tapped, a selection is confirmed. If the cancel button is tapped, or...

Read More

Confirmation dialogs provide both confirmation and cancel buttons. After a confirmation button is tapped, a selection is confirmed. If the cancel button is tapped, or the area outside the dialog, the action is cancelled.

Do.

Provide confirmation and dismissive buttons.

Don’t.

Don’t provide a single action, as it’s unclear how to dismiss the dialog.


Full-screen dialog

Usage

Full-screen dialogs group a series of tasks, such as creating a calendar entry with the event title, date, location, and time. Because they take up...

Read More

Full-screen dialogs group a series of tasks, such as creating a calendar entry with the event title, date, location, and time. Because they take up the entire screen, full-screen dialogs are the only dialogs over which other dialogs can appear.

A calendar app launching a full-screen dialog

Full-screen dialogs may be used for content or tasks that meet any of these criteria:

  • Dialogs that include components which require keyboard input, such as form fields
  • When changes aren’t saved instantly
  • When components within the dialog open additional dialogs

Full-screen dialogs are for mobile devices only. For tablet or desktop, use a modal dialog.

Behavior

To save a selection in a full-screen dialog, the user taps “Save.” To discard all changes and exit, the user taps the “X” icon or...

Read More

Saving selections

To save a selection in a full-screen dialog, the user taps “Save.” To discard all changes and exit, the user taps the “X” icon or “Back” button.

Confirmation

The confirmation action is disabled until all mandatory fields are filled. Use descriptive verbs such as “Save,” “Send,” “Share,” “Update,” or “Create.” Don’t use vague terms such as “Done,” “OK” or “Close.”

  • If no changes have been made, the dialog closes and no discard confirmation is required
  • If the user has made changes, the user is prompted to confirm the discard action

Don’t.

A “Close” button (1) is vague because it does not indicate whether changes will be saved or discarded.

Dialog windows

Launching a full-screen dialog temporarily resets the app’s perceived elevation, allowing simple menus or dialogs to appear above the full-screen dialog.

A calendar app launching a full-screen dialog, which launches a confirmation dialog, and alert dialog.

Layout

Full-screen dialogs cover the screen and don’t appear as a floating modal window. Place confirmation and dismissive actions in the top app bar. Because full-screen...

Read More

Full-screen dialogs cover the screen and don’t appear as a floating modal window.

Actions

Place confirmation and dismissive actions in the top app bar.

Navigation

Because full-screen dialogs can only be completed, dismissed, or closed, only use the close “X” navigation button.

Don’t.

Avoid any navigation icon other than “X.” The up arrow (1) indicates the view’s state is being saved, which isn’t the case in a full-screen dialog.

Titles

Titles should be succinct. They can wrap to a second line if necessary, and be truncated. If there are long titles, or titles of variable lengths (such as translations), place them in the content area instead of the app bar.

Caution.

Avoid placing long titles in a dialog’s top app bar (1), as the truncated text may lead to misunderstanding.

Do.

Find ways to shorten app bar text, and place longer titles into the content area (1) of a full-screen dialog.


Theming

Crane Material Theme

This travel app’s dialogs have been customized using Material Theming. Areas of customization include color, typography, and shape. Crane is a travel app that uses...

Read More

This travel app’s dialogs have been customized using Material Theming. Areas of customization include color, typography, and shape.

Crane’s customized dialogs

Color

Crane’s dialogs use custom color on five elements: the container, title text, supporting text, button text, and scrim.

Element

Category

Attribute

Value

Container

Surface

Color

Opacity

#FFFFFF

100%

Title text

On Surface

Color

Opacity

#000000

87%

Supporting text

On Surface

Color

Opacity

#000000

60%

Button text

Primary

Color

Opacity

#5C1349

100%

Scrim

On Surface

Color

Opacity

#000000

32%

Typography

Crane’s dialogs use custom typography for title text, supporting text, and button text.

Element

Category

Attribute

Value

Title text

H6

Typeface

Font

Size

Case

Raleway

Bold

20

Title case

Supporting text

Body 1

Typeface

Font

Size

Case

Raleway

Medium

16

Sentence case

Button text

Button

Typeface

Font

Size

Case

Raleway

SemiBold

14

All caps

Shape

Crane’s dialog boxes have custom corner shapes.

Element

Attribute

Value

Container

Top left corner

Top right corner

Bottom right corner

Bottom left corner

Rounded 16dp

Rounded 16dp

Rounded 16dp

Rounded 16dp

Reply Material Theme

This email app’s dialogs have been customized using Material Theming. Areas of customization include color, typography, and shape. Crane is a travel app that uses...

Read More

This email app’s dialogs have been customized using Material Theming. Areas of customization include color, typography, and shape.

Reply’s customized dialogs

Color

Reply’s dialogs use custom color on five elements: the dialog box, title text, supporting text, button text, and scrim.

Element

Category

Attribute

Value

Container

Surface

Color

Opacity

#000000

100%

Title text

On Surface

Color

Opacity

#232F34

100%

Supporting text

On Surface

Color

Opacity

#232F34

100%

Button text

Primary

Color

Opacity

#344955

100%

Scrim

On Surface

Color

Opacity

#232F34

32%

Typography

Reply’s dialogs use custom typography for title text, supporting text, and button text.

Element

Category

Attribute

Value

Title text

H6

Typeface

Font

Size

Case

Work Sans

Bold

21

Sentence case

Supporting text

Body 1

Typeface

Font

Size

Case

Work Sans

Regular

16

Sentence case

Button text

Button

Typeface

Font

Size

Case

Work Sans

SemiBold

15

Sentence case

Shape

Reply’s dialog boxes have custom corner shapes.

Element

Attribute

Value

Container

Top left corner

Top right corner

Bottom right corner

Bottom left corner

Sharp 0dp

Sharp 0dp

Sharp 0dp

Sharp 0dp


Specs

Mobile

20dp #000000de 14dp #00000099 #ffffff R255 G255 B255 Elevation 24dp All corners Rounded: 4dp Scrim #000000, opacity:32% All measurements are displayed in device-independent pixels (dps)...

Read More

Simple dialog

  • Measurement 64
  • Measurement 24
  • Measurement 20
  • Measurement 40
  • Measurement 56
  • 4040

Alert dialog

  • Measurement 52
  • Measurement 24
  • Measurement 24
  • Measurement 38
  • Measurement 28
  • Measurement 280
  • Measurement 8
  • Measurement 8
  • Measurement 8
  • Measurement 8

Confirmation dialog

  • Measurement 24
  • Measurement 24
  • Measurement 52
  • Measurement 280
  • Measurement 40
  • Measurement 36
  • Measurement 8
  • Measurement 8
  • Measurement 8
  • Measurement 8
  • Measurement 28

Confirmation dialog (scrolling)

  • Measurement 64
  • Measurement 52
  • Measurement 280
  • Measurement 24
  • Measurement 32
  • Measurement 24
  • Measurement 40
  • Measurement 8
  • Measurement 8
  • Measurement 8
  • Measurement 8
  • Measurement 48
  • Measurement C
  • 2424

Confirmation dialog with long actions

  • Measurement 24
  • Measurement 24
  • Measurement 36
  • Measurement 28
  • Measurement 8
  • Measurement 12
  • Measurement 8
  • Measurement 40

Full-screen dialog

  • Measurement 16
  • Measurement 32
  • Measurement 8
  • Measurement 8
  • Measurement 12
  • Measurement 56
  • Measurement 24
  • Measurement 38

Desktop

20dp #000000de 16dp #00000099 14dp #6200ee #ffffff R255 G255 B255 #ffffff R255 G255 B255 Elevation 24dp All corners Rounded: 4dp Text Buttons Height The height...

Read More

Mobile alert

  • Measurement 24
  • Measurement 8
  • Measurement 52
  • Measurement 182
  • Measurement 24
  • Measurement 40
  • Measurement 8
  • Measurement 560
  • Measurement 8
  • Measurement 8
  • Measurement 28
  • Measurement 36

Implementation

Dialogs implementation support for each platform is indicated below.

IOS Material Component

Status: Under Development

Flutter Material Component

Status: Code Available

Web Material Component

Status: Under Development