Modal dialog

Under revision

This page has outdated information. We are working on revising it, so check back soon.

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. (Optional)
Filter for dialog content:
use only if the amount of information clearly benefits from narrowing down the content. (Optional)
Close:
use only if the modal dialog doesn't use a bottom bar, and therefore doesn't have a 'Close' link button. (Otherwise required)
Bottom bar:
by default, the modal dialog box has a bottom bar. Hide it when the content is only information, without any need for action (Default, but not required)
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'). (Required if using bottom bar)

Interactive examples

Standard dialogs

Modal dialogs can be set to any size, but the following 4 sizes are provided by AUI to cover the most common use cases.

Errors and warnings

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