Dialog Box
A dialog box is a temporary pop-up that takes focus from the page or app and requires people to interact with it. It’s primarily used for confirming actions, such as deleting a file, or asking people to make a choice.
Best practices
Layout
Don't use more than three buttons.
Dialog boxes consist of a header, body, and footer.
Validate that people’s entries are acceptable before closing the dialog box. Show an inline validation error near the field they must correct.
Blocking dialogs should be used very sparingly, only when it is critical that people make a choice or provide information before they can proceed. Blocking dialogs are generally used for irreversible or potentially destructive tasks. They’re typically paired with an overlay without a light dismiss.
Header
Locks to the top of the dialog.
May include an icon to the left of the title.
Includes a Close button in the top-right corner.
Footer
Lock buttons to the bottom of the dialog.
Includes one primary button. A secondary button is optional.
Width
Maximum is 2/3rd the background width
Minimum is 1/2 the background width
Height
Maximum is 1/2 the background height
Minimum is 1/3 the background height.
Content
Title
Keep the title as concise as possible.
Don’t use periods at the end of titles.
This mandatory content should explain the main information in a clear, concise, and specific statement or question. For example, “Delete this file?” instead of “Are you sure?”
The title shouldn’t be description of the body content. For example, don’t use “Error” as a title. Instead, use an informative statement like “Your session ended.”
Use sentence-style capitalization (only capitalize the first word).
Body copy (Optional)
Don't restate the title in the body.
Use ending punctuation on sentences.
Use actionable language, with the most important information at the beginning.
Use the optional body content area for additional info or instructions, if needed. Only include information needed to help people make a decision.
Button labels
Write button labels that are specific responses to the main information in the title. The title “Delete this file?” could have buttons labeled “Delete” and “Cancel”.
Be concise. Limit labels to one or two words. Usually a single verb is best. Include a noun if there is any room for interpretation about what the verb means. For example, “Delete” or “Delete file”.
Dialog Box
States
Transitions
Error Dialog Box
In case of an error the surface color changes to error color as shown below. The error colors are chosen to be bright to fetch user’s attention for immediate action.
States
Transitions
Last updated
