Intro
Dialogs are a type of modal used to provide high priority information, display critical information, or ask for specific user action or decisions. They prompt the user to react and interrupt the process of the application.
Alert dialog (first), simple dialog (second), confirmation dialog (third), full-screen dialog (fourth)
Usage
Do
- Use a dialog for important or critical information that requires a specific user action, decision, dismissal, or acknowledgement.
- Show available actions for the user and how to dismiss the dialog.
- Use a pane for more complex actions instead of a dialog on large screens.
- Opt for a full-screen dialog when there is limited vertical space.
Don't
- Don’t use a dialog if you want to display a simple message that doesn’t require any action. Use a snackbar instead.
- Don’t use dialogs for complex navigation or stacking one non-full-screen dialog on top of another.
Anatomy
Alert Dialog
A. Text
Describes the action and prompts the user to take action.
B. Footer Bar
The footer bar houses the buttons for the user to take action.
Alert dialog anatomy
Full-Width Button Dialog
A. Title
Summarizes the dialog’s purpose.
B. Description
Describes what action needs to be taken in a clear and concise manner so that the user knows what to do.
C. Footer Bar
The footer bar houses the buttons for the user to take action.
Full-width button dialog anatomy
Simple Dialog
A. Title
Summarizes the dialog’s purpose.
B. Selection List
Lists the possible options that the user may choose from.
Simple dialog anatomy
Confirmation Dialog
A. Title
Summarizes the dialog’s purpose.
B. Selection List
Lists the possible options that the user may choose from.
C. Footer Bar
The footer bar houses the buttons for the user to take action.
Confirmation dialog anatomy
Full-Screen Dialog
The full-screen dialog has an app bar at the top, and content displayed inside a dialog area.
For a modal dialog on tablet, a scrim covers the content underneath the dialog.
A. App Bar
Contains a discard action button on the left, and a confirmation action button on the right. The “close” icon is used by default for discard action. Unsaved changes trigger a confirmation dialog when users tap on the “Close” icon. The title should indicate the task performed by this dialog (for example “Create Work Order”).
Users can drill down within a full-screen dialog with a push navigation. In the drill down page, a back arrow icon replaces the “Close” icon for users to navigate back. Changes in the drill down page are reflected once users navigate back.
B. Content Area
All types of controls and form cells can be used in full-screen dialog to fulfill the task. See Filter and Create.
C. Scrim
The scrim for the modal dialog is #000000 with 32% opacity.
When a second dialog appears on the screen, such as a confirmation dialog / date-time picker launched from an existing dialog, remove the existing scrim and apply a darker scrim (#000000 with 60% opacity) on top of the first dialog. This darker scrim applies focus on the new modal. It pushes the new dialog to the foreground and all other content gets pushed to the background.
Full-screen dialog anatomy: compact (left) and expanded (right)
Adaptive Design
Alert, Simple, and Confirmation Dialog
Compact
For compact window size classes, the recommended dialog width is 280dp.
For dialogs that have a selection list, the maximum height for the list is set to six list cells. Since each list cell is 48dp in height, this means the maximum height for the list is 336dp. If it exceeds six items, the list area is scrollable to see the other options.
Medium and Expanded
For medium and expanded window size classes, the dialog width depends on the content, but it needs to be a multiple of 56 with a maximum width of 560dp.
Full-Screen Dialog
Compact
On compact screens, such as mobile phone devices, the full-screen dialog covers the whole screen.
Compact Height
When designing for compact devices such as mobile phones, it’s important to consider how dialogs should behave in different orientations. When a compact device is turned from portrait to landscape view, the screen width becomes expanded, but the height remains compact. In this case, it’s best to keep using a full-screen dialog rather than a regular dialog. For example, in medium/expanded window size classes, the sort and filter pattern is displayed as a regular dialog, whereas in a compact height window, this regular dialog is translated to a full-page dialog to ensure enough space is available to scroll through the contents.
Window size classes based on the window height: sort & filter in compact (left), medium/expanded height (right)
Medium and Expanded
On medium and expanded window size classes, such as tablets, the modal is horizontally and vertically center-aligned. The modal dialog does not have a set of width or height. Below are some recommended rules. You can adjust it based on your specific device or use case:
Height:
- The dialog height depends on the content height.
- We recommend a minimum modal dialog height of half the screen height in landscape mode.
- The maximum height of a dialog starts from 24dp from the top of the screen (right below status bar), to the bottom of the screen content area (above the bottom navigation bar).
- When content exceeds the maximum height, it scrolls vertically inside the dialog. The dialog may grow taller when the device is rotated from landscape to portrait mode to reveal more content.
Width:
- We recommend a dialog width of 512dp.
- Keep the dialog width the same on both landscape and portrait mode to reduce distracting transitions.
- The maximum width is 560dp.
Modal dialog with maximum height: landscape mode (left) and portrait mode (right)
By default, dialog height should be determined by the content in the initial screen (parent).
When navigating to the next screen inside the dialog, for example, drilling down to a list of checkbox cells from a list picker form cell, consider the following recommendations:
- If the child screen has less content than the parent screen, use the same dialog height as the parent screen to avoid disruptive transitions.
- If the child screen has more content than the parent screen, increase the screen height to accommodate more content (until it reaches the maximum height allowed by the device).
In summary, the child screen can be equal to or taller than the parent screen.
Dialog's height changes based on content length
Adaptive Layout
Material Design has introduced canonical layouts to improve the user experience on large screen devices. For large screens, we recommend presenting your content in a pane instead of a dialog to avoid disrupting the user flow. This approach provides a more seamless and adaptive experience, optimizing the use of screen real estate.
Variations
Alert Dialog
Alert dialogs prompt the user by displaying urgent information, detail, or actions. The dialog cannot be dismissed or closed until the user selects one of the actions.
The action must describe what the selection will do. Avoid using “Yes” or “No” choices. Instead, be more explicit by using descriptive verbs such as “Cancel” or “Delete”.
Unlike other dialogs, the alert dialog does not have a title.
Alert dialog
Full-Width Button Dialog
There is also a stacked full-width button dialog which could be used if the buttons require longer text.
Stacked full-width button dialogs can be used for alert and confirmation dialogs.
Full-width button dialog
Simple Dialog
Simple dialogs display a list that requires a selection that will take immediate effect. Due to its interruptive nature, a non-dialog option for providing options would be a dropdown menu.
Users have the following options to interact with the simple dialog:
- Tapping one of the actions in the list, which closes the dialog.
- Tapping outside of the dialog to close the dialog without a selection.
Do not use buttons with simple dialogs as choosing one of the selections is the affirmative action and tapping outside of the dialog will close it without a selection.
Simple dialog
Confirmation Dialog
Confirmation dialogs are used to confirm a choice and require the user to accept or dismiss an action, allowing them to commit to their choice before it’s applied. Unlike the simple dialog, the confirmation dialog uses buttons so that the user can change their selection as many times as needed before confirming their choice.
There are two ways to interact with the confirmation dialog:
- Tapping the confirmation button to apply the action that was selected.
- Tapping the dismissive button to cancel the action.
Confirmation dialog with two buttons
Full-Screen Dialog
Full-screen dialogs cover the whole screen to maximize available screen space for complex tasks such as create. They should only be used for compact window size classes. On large screens, where more screen real estate is available, the dialog can be shown in a pane or as a modal (without covering the whole screen), depending on the screen layout. However, on tablet devices, when users edit an existing object, a full-screen dialog instead of a modal should be used to avoid users editing the copy of attributes that can be seen through the semi-transparent scrim.
Full-screen dialogs are the only dialogs that allow other dialogs to appear on top.
Full-screen dialog on compact (left) and expanded (right)
Resources
Development: AlertDialog, MaterialAlertDialogBuilder
SAP Fiori for iOS: Modals
Material Design: Dialogs