Dialogs contain an optional title, content, and actions.
The optional title briefly describes the type of choice being made. Titles should always be displayed in their entirety and should be used only when necessary. Titles can be used to clarify the decision being made. For example, a title may indicate what part of a process the dialog relates to or identify what will be affected by the decision, such as a setting.
Dialog content can vary widely, but typically consists of text and/or UI control elements and is focused on a specific task or process, such as confirming item deletion or choosing a setting.
When needed, actions acknowledge, affirm, or dismiss the particular choice or process presented by the dialog content.
This dialog contains a title, content and actions.
A note on accessibility
To ensure usability for people with disabilities, make sure that your buttons have a minimum height of 36dp, but that the touchable target has a minimum height of 48dp.
The default color of all dialog action text is the system color. The system color can be overridden to use the application’s theme accent color. Make sure that the combination of accent color and action text doesn’t impart unintended meaning. For example, red text implying warning or danger for a non-destructive confirmation action.
Always make sure the action text color uses a sufficient contrast ratio to meet accessibility guidelines. Change the default text color as needed to create a sufficient contrast ratio.
Buttons have a minimum height of 36dp, but the touchable target has a minimum height of 48dp.
This dialog’s text uses an insufficient contrast ratio. Additionally, the red action text implies a warning or danger when neither action is destructive.
Actions
Dialogs present a focused and limited set of actions, which are generally affirmative or dismissive.
Affirmative actions are placed on the right side and continue the process. Affirmative actions may be destructive, like “Delete” or “Remove”.
Dismissive actions are placed directly to the left of affirmative actions and return the user to the originating screen or step in the process.
Dismissive and affirmative action text can be “Cancel”/”OK” or can be more specific active verbs or verb phrases that indicate the outcome of the decision.
Dismissive actions are always placed directly to the left of affirmative actions.
Dialog actions should make decisions as easy as possible by presenting a clear, unambiguous choice that directly relates to the dialog’s title and content.
- Clearly state a potential result in the dialog title.
- The dialog content should directly relate to the title or choices.
- Present clear choices.
Avoid presenting users with ambiguous or unclear choices. In this example, “Cancel” doesn't make sense in relation to the title because there's no clear action being proposed.
For languages without capitalization (for example, Chinese, Japanese, or Korean), the consistent placement and spacing of actions in the bottom-right corner of the dialog, along with text color, help distinguish dialog actions from regular dialog text.
In particular, because a dismissive action is never disabled, and because the positioning of dialog actions places the dismissive action before the affirmative action in reading order, a disabled affirmative action is prevented from appearing like regular dialog text.
The consistent placement of actions and text color helps distinguish actions from regular text even when the affirmative action is disabled.
Affirmative actions are more likely to be disabled until a choice is made. Dismissive actions are never disabled.
In situations where users are required to acknowledge the dialog’s content prior to proceeding, an alert may contain only one action. However, this type of alert should be used sparingly as it is interruptive and does not provide users with a decision to make or choose an action. Consider other methods of communicating the information to users, such as in-line with a view’s content.
Dialogs generally should not include more than two actions. A third action such as “Learn more” that navigates away from the dialog or app leaves the current task and decision in an indeterminate state.
Avoid using a “Learn more” action in a dialog to access help documentation. If a little more detail or explanation is needed for the dialog contents, use in-line expansion within the dialog. If more extensive information or explanation is needed for the dialog content, provide that information prior to entering the dialog.
The learn more action navigates away from this dialog, leaving it in an indeterminate state.
Content guidelines
Padding around content area: 24dp
Padding between title and body text: 20dp
Padding around buttons: 8dp
Button height: 36dp
Action area height: 52dp
Dialog elevation: 24dp
Content padding
Within the content area, the 24dp of padding below the content helps separate it from the actions.
Content padding for a dialog in a scrolled state
Button width and padding
Button height: 36dp
Minimum button width: 64dp
Internal button padding: 8dp
Padding between buttons: 8dp
Detail of button widths and padding
Button area height: 52dp
Left button padding: 24dp
Right button padding: 8dp
Padding between buttons: 8dp
Detail of button area
In a scrolled state, a stroke delineates the dialog’s content area from actions.
Side-by-side buttons
Side-by-side buttons are recommended when the text of each label does not exceed the maximum button width, such as the commonly used OK/Cancel buttons.
Use the following formula to calculate maximum button width for a given dialog:
The maximum width for buttons in a dialog =
(Dialog width - 8dp - 8dp - 8dp)/2
For example:
The maximum width for buttons in a 280dp wide dialog =
(280dp - 8dp - 8dp - 8dp)/2 = 128dp
Button height: 36dp
Padding between text and action area: 24dp
Padding around buttons is: 8dp
Stacked full-width buttons
When text labels exceed the maximum button width, use stacked buttons to accommodate the text. Affirmative actions are stacked above dismissive actions.
Touchable target height for each button: 48dp
Padding between text and touch target: 24dp
Padding below touch target to dialog edge: 8dp
Padding between button text right edge and dialog edge: 16dp
Simple dialog keylines
Vertical keyline at 24dp from the left and right edges. Content associated with an icon or avatar aligns 80dp from the left edge.
Keylines for a simple dialog
Full-screen dialog titles
Full-screen dialog titles can wrap to a second line if necessary, and then should be truncated. Titles should be succinct, but in some situations, such as when words are longer in different languages, titles may need to wrap.
App bar height with a single line of text: 56dp
App bar height with two lines of text: 80dp
Title text keyline: 72dp
Title text: 20sp
Title text top and bottom padding: 20dp
Dismissive action padding from left edge: 16dp
Affirmative action text: 14sp
Affirmative action text padding on the left and right: 16dp
Detail of a full-screen dialog app bar
Full-screen dialog with an app bar containing a single line of text.
Note that this image is for illustration purposes only. Long titles should be placed in the content area of the full-screen dialog.