Modal dialog

Modal dialogs are used to get a response from a user, to reveal critical information that cannot be ignored, or to show data without losing the overall context of a page. Interactions on the main page must wait for the dialog to close.

General usage

Modal Dialog Call Out
Action relating to the title:
could be help text link.
Filter for dialog content:
use only if the amount of information clearly benefits from narrowing down the content.
use only if the modal dialog doesn't use a bottom bar, and therefore doesn't have a 'Close' link button.
Bottom bar:
by default, the modal dialog box has a bottom bar. Hide it when the content is only information, without any need for further actions.
Dialog actions:
The main action should be a primary button, other actions should be link buttons. In most cases, there should only be two actions. Avoid non-descript primary action labels – rather use action verbs that by themselves describe what will happen on click (for example 'Save' instead of 'Done').

Interactive examples

Standard dialogs

Modal dialogs only come in four standard sizes:

Errors and warnings

Messages should not be used inside of a dialog to display an error or a warning. For example, use this type of dialog to warn users when a very destructive action needs to be confirmed.