Dialog
Style
A dialog is a floating container on top of a transparent backdrop. The container requires a backdrop so it can separate itself from the page underneath, this helps users focus on the dialog content.
Anatomy

- Backdrop
- Container
- Close button
- Header section
- Body text section
- Footer section
- Container shadow
Theme
A dialog is available in the light theme only.

Configuration
The dialog container does not have a maximum height, but too much content in the body text section will cause scrolling.

Space
The amount of space in a dialog reduces as breakpoints get smaller.
Large breakpoints

Small breakpoints

Interaction states
Interactive elements may be added to a dialog container, but very sparingly. If interactive elements are added, go to their element or pattern pages to view the interaction states.
Hover
Control and inactive page number buttons have the same hover state. Truncation is not interactive so it has no hover state.

Property | Light theme |
---|---|
Color - close button | #151515 |
Focus

Property | Light theme |
---|---|
Color - close button | #151515 |
Color - focus ring | #0066cc |
Active

Property | Light theme |
---|---|
Color - close button | #151515 |
Color - focus ring | #0066cc |