Dialog

Dialogs inform users about critical information, require users to make decisions, or encapsulate multiple tasks within a discrete process. Use dialogs sparingly because they are interruptive in nature–their sudden appearance forces users to stop their current task and refocus on the dialog content. Not every choice, setting, or detail warrants such interruption and prominence.

Structure

Elements

1. Container
2. Title (optional)
3. Header (optional)
4. Close icon (optional)
5. Content
6. Button (optional)
7. Overlay

Header

The header should give the user a sense of what the dialog content will contain. Headers have a bottom border by default, but the border may be removed as needed.

Dialog headers typically contain the following elements:

• Title
• Close icon

Content

The content area holds the main information that your dialog contains, such as text, form fields, or a gallery. Padding may be removed if your content contains a gallery or other components that do not require padding.

Overlay

The overlay is an element that is created when a dialog is opened and destroyed when the dialog is closed.

Placement

Unless otherwise specified, dialogs will be aligned to the top of the viewport by default.

Style

Style specifications are available to inspect via Abstract. The following link will take you to their web-based interface.

Inspect component

Theming

The following table lists the theme properties used to style this component and any variations as well as a sample value.

A full list of properties used within the design system—as well as general usage guidelines—is available on the Theme properties page.

Examples of each theme property may be referenced by clicking a property name in the “property” column.