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.
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.
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
|