Max-width: 450px
Height determined by the height of the image and the amount of body text
Elevation and shadow level 4
White background
Close button
- Icon button
Image
- Centered
Body text
Centered footer button row
- stacked buttons
- optional secondary button
- primary and secondary are visible by default

...

Single action only

Provides more focus on the desired action

...

A full page transparent overlay is shown underneath the dialog to provide visual focus.
On mobile screens (XS) the dialog fills the screen width horizontally leaving 12 px of margin to the left and right screen edge in which the user can see the transparent overlay. The dialog height is variable based on the dialog content needs.
On desktop screens (MD, L, XL) the dialog has two standards widths. The narrow version is 400px and the wide one is 600px.
Buttons should be stacked vertically and centered with the primary action always above the secondary. They are not presented in a sticky footer and the dialog content should never have a secondary scroll on the page.

⚛ Anatomy

...

...