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.
- 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').
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.