Dialog Guidelines

The Dialog component displays a modal window floating over the page's layout.

Design Guidelines

Dialogs are displayed over the page to show extra content without affecting the layout. They make the workflow less linear ("get in then get out"), so they're better suited for optional branches rather than a linear flow.

Use Dialogs for simple, specific purposes: filling in a short form, previewing data, or prompting the user to make a decision. The Dialog can be closed by clicking outside, clicking the Close Button, or pressing the escape key.

Dialogs should be sized so their content is accessible without scrolling. If content is too large, consider using Accordion or Steps instead.

Placement

Dialogs are displayed in the center of the screen.

Content

Title: keep titles short and to the point.

Buttons: displayed in the footer, aligned to the right. The highlighted action is first on the left. Avoid more than 3 buttons in the footer.

Back button: for workflows with a linear sequence of dialogs, a Back Button can be shown in the header.

Cover images: an image can be displayed at the top, seamlessly reaching behind the header. Switch between dark and light header colors for visibility.

Custom UI in header and footer: use slots to display extra content alongside the default header and footer.

Accessibility

The Dialog supports keyboard navigation: open, close with Escape, and tab between actions. Tabbing is looped inside the Dialog until it is closed.

Use Cases

Confirmation Dialogs

Used as a "final prompt" before committing to an action, and as a safety measure against accidental inputs.

The title should be a short question, answered by clicking a button, e.g. "Delete This?" with "Delete" and "Cancel". The highlighted action should label the action itself, not a generic "Yes" or "OK".

Consequential Confirmation

Shown before an action with hard-to-stop or hard-to-undo consequences, e.g. launching a campaign or starting a long process.

"Create Birthday Program? The program will generate Automation programs, Campaigns, and Segments. This might take a few minutes. — Create Program / Cancel"

Delete Confirmation

Shown before permanently deleting a resource. Make the destructive action clear in the button label.

"Delete Campaign? Once deleted, the campaign cannot be accessed, sent to recipients, or used in automation workflows. — Delete / Cancel"

Discard Confirmation

Shown when leaving a page or closing a dialog with unsaved data.

"Discard Changes? By closing this dialog, all your unapplied changes will be lost. — Discard / Cancel"