Dialogs

Dialogs are a type of modal window that appears in front of app content to provide critical information or ask for a decision. They disable app functionality until the user interacts with them.

Dialogs are typically used for:

  • Confirming a user action (e.g., deleting an item)
  • Displaying important information that requires user acknowledgment
  • Gathering user input without navigating away from the current page

Dialogs should be used sparingly to avoid disrupting the user experience. They should be clear, concise, and provide a straightforward way for users to complete the required action or dismiss the dialog.

Regular dialogs

Regular dialogs work best for short decisions or confirmations: keep titles clear, lead with the primary action, and always provide a close affordance that is keyboard-focusable. Use the native <dialog> element to inherit accessibility features, and rely on motion or subtle dimming—not surprise—to draw attention.

Dialog

Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

Dialog with footer

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi?

Common pitfalls: trapping focus without escape, hiding the close control, or placing destructive actions in the left-most position (which many readers treat as “safe”). Always restore focus to the triggering element after closing, and ensure keyboard users can reach every control inside the dialog.

<dialog>
  ...
  <a class="control close"><svg>...</svg></a>
</dialog>

<dialog>
  ...
  <a class="control close"><svg>...</svg></a>
  <footer>
    <button class="primary">...</button>
    <button>...</button>
  </footer>
</dialog>

Width

Dialog width should match the task: small for terse confirmations, medium for short forms, wide for rich text or summaries, and full-width for immersive previews. Avoid stuffing wide dialogs with single-line content—choose the smallest size that keeps copy readable without awkward wrapping.

Are you sure?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

Backdrops: use ::backdrop to soften the page behind the dialog, and keep contrast high so the active dialog remains obvious. If you allow backdrop clicks to close, make sure keyboard users have an equivalent escape path (Esc or a close button), and prevent background scrolling while the dialog is open.

<dialog class="small"></dialog>
<dialog class="medium"></dialog>
<dialog class="wide"></dialog>
<dialog class="full-width"></dialog>

Dialog demo

To see a dialog box in action, please press below button:

Dialog Demo

This demo shows a modal collecting login details with primary and secondary actions. Launch it, tab through the form fields, and use the controls or Esc key to close, mirroring a real authentication gate.


Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.