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

Transitions	Front View	Isometric View
Appear	-	-
Disappear	-	-

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

Transitions	Front View	Isometric View
Appear	-	-
Disappear	-	-