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

Container
Title (optional)
Header (optional)
Close icon (optional)
Content
Button (optional)
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.

Don't

Don't create multiple overlays. They will stack and make the background much darker.

Placement

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

Don't

If the contents of the dialog grows larger than the viewport, much of the content will be cut off.

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.

Sample	Property	Sample value
	`bodyTextPrimaryColor` Dark text color used for primary content in layouts	`#071523FF`
	`bodyTextSecondaryColor` Medium dark text color used for secondary or muted content in layouts	`#64707DFF`
	`cardCornerRadius`	`10px`
	`cardShadow`	`0 3px 12px 0 #00000026`
	`dividerDefaultColor` Default fill for dividers in the app	`#E6E6E6FF`
	`primaryContentBackgroundColor` Default card and list background	`#FFFFFFFF`