Skip to main content

Dialog

A Dialog is a visual overlay that is presented on top of existing screen content to prompt the user to perform an immediate action or acknowledge the receipt of a piece of information.

There are two types of Dialogs, modal and non-modal. A Modal Dialog blocks the user from interacting with any content in the background as long as it remains open. A Non-modal Dialog, however, does not impose such restrictions. In general, users will encounter Modal Dialogs when dealing with critical tasks or information that requires action or acknowledgement, while Non-modal Dialogs are more typically tied to optional tasks requiring no user acknowledgement or validation.

Rules of Thumb

Appearance and Behavior

Structurally, a Dialog is comprised of a container with a title at the top, a content body containing relevant textual and/or visual information, and one or more action buttons at the bottom (e.g. “Accept”, “Cancel”, or “OK”).

Regardless of type, Dialogs will be invoked by user action. This may involve direct intervention (e.g. clicking on an “Edit” icon) or indirect action (e.g. attempting to navigate away from a page with unsaved changes).

Examples

Do: Use buttons within a Dialog to confirm or cancel actions.
Do: Use buttons within a Dialog to confirm or cancel actions.
Don’t: Use links or other components to confirm or cancel actions.
Don’t: Use links or other components to confirm or cancel actions.