Dialog

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Style
  2. Theme
  3. Space
  4. Interaction states
  1. Style
  2. Theme
  3. Space
  4. Interaction states

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

Anatomy of a dialog with lots of annotations pointing to various parts
  1. Backdrop
  2. Container
  3. Close button
  4. Header section
  5. Body text section
  6. Footer section
  7. Container shadow

Theme

A dialog is available in the light theme only.

Light theme dialog

Space

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

Large breakpoints

A dialog container on a large breakpoint with spacing between all elements

Small breakpoints

A dialog container on a small breakpoint with spacing between all elements

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

Light theme dialog hover state example

Focus

Light theme dialog focus state example

Active

Light theme dialog active state example
Edit this page on GitHub