Dialog

When to Use

Use dialogs for short task completions and to gather information from the user.

Use dialogs to let users confirm some changes or decisions.

When Not to Use

If you want to give information that wasn't directly triggered by the user, use a message instead.

If the dialog gets very complex and big, consider creating a separate page or form for the functionalities instead. (NNGroup, Top 10 Application Design Mistakes (#7))

Title

Every dialog starts with a concise and meaningful title that summarizes the dialog’s purpose. Write titles in H1. Always use sentence capitalization. Don’t end titles with periods.

Subtitle

Use subtitles to give further information about the current dialog or to describe the effects of the dialog. Subtitles can consist of simple text or other elements. In most cases, subtitles are written in regular font size (14 pixels).

Content

The content area consists of the central information and controls within the current dialog.

Button Row

The button row is normally the last item of a modal. It usually gives the users the control to apply or cancel their actions.

Always position your buttons from the most to least important, from left to right. The leftmost button is in almost all cases the primary button, while all other buttons are regular buttons.

If your button row additionally contains a destructive button, e.g. to cancel the current action, position it on the right-hand side. (NNGroup, Preventing User Errors)

To learn more about buttons, refer to the button guidelines.

Sections

In general, try to keep your content to a minimum. If you still have a lot of content to display, you can split it up into several sections. This way users won’t get confronted with too much information at once and therefore feel less overwhelmed.

Seperated Area

Sometimes content should be in some way detached from the rest of the dialog, e.g. for grouping purposes. You can use an area with a grey background within the dialog for that.