Mobile only: Due to limited real estate on mobile devices, dialog content appearing in other form factors (tablet, desktop, etc.) may be more appropriate on mobile using a full-screen dialog.
Usage
Full-screen dialogs group complex tasks that require explicit action, such as save or create, before changes are committed or discarded, as in a calendar entry.
Full-screen dialogs enable complex layouts, minimize the appearance of stacked sheets of material (dialogs above dialogs) and increase the app’s perceived z-depth. They enable individual tasks to launch simple menus or simple dialogs as part of the complex operation.
Consider using a full-screen dialog when the content or process meets any of the following criteria:
- The dialog includes components like pickers or form fields requiring an input method editor (IME), such as a keyboard.
- When changes are not saved in real time
- When there is no draft capability in the app
- When performing batch operations or queuing changes prior to submitting them
No modifications and selections made in the full-screen dialog are saved until “Save” is touched. Touching the “X” will discard all changes and exit the dialog.
The full-screen dialog supports a simple dialog used to pick dates.
Date picker opened from full-screen dialog
Actions
In full-screen dialogs, the confirmation and dismissive actions are at the top of the screen.
Confirmation
The confirmation action is at the top right of the screen and uses descriptive and accurate verbs, such as “save,” “send,” “add,” “share,” “update,” or “create.”
Don’t use vague actions such as “done,” “ok” or “close” for the confirmation action. They are too similar in meaning to the X and non-specific in their result.
The confirmation action is disabled until all mandatory criteria in the dialog are met.
Discard
The discard action, an “X” at the top left of the screen, closes the full-screen dialog and discards any changes. The Back button is equivalent to the discard action.
If the user has made any changes, they are prompted to confirm the discard action. If no changes have been made, touching the “X” or “Back” immediately closes the dialog and no discard confirmation is required.
Don’t use vague terms like “Close” for confirmation actions.
Prompt users to confirm the discard action if they have made any changes.
Navigation
The “X” used in a full-screen dialog differs from an up arrow, which indicates the view’s state is constantly being saved or when apps enable draft or autosaving. For example, an up arrow is used in Settings because all changes are committed immediately. In these cases, the Back button navigation and action match the up arrow functionality, and there are no explicit confirmation or cancel actions.
The up arrow in this Settings example indicates that any changes will be immediately saved upon selection.
Touching the “X” in this Settings example will discard all changes. Changes will be saved only upon touching Save.
Titles
Full-screen dialog titles don’t use dynamic type.
Titles should be succinct.
Full-screen dialog titles can wrap to a second line if necessary, and then should be truncated.
If the full-screen dialog uses titles of variable length or anticipates long titles (for example, because certain words are longer in different languages), place title text in the content area of the dialog instead of the app bar.
Avoid using titles of variable length in the app bar.
Place long titles in the content area of the full-screen dialog.