Component reference

Dialog

Material 3 Expressive Dialog component for important prompts in a user flow.

Material 3Web ComponentFramework agnostic

Usage

A dialog is a modal window that appears in front of app content to provide critical information or ask for a decision. It traps keyboard focus, makes the page background inert, and restores focus to its opener after closing.

Open Dialog

Last close reason: —. Escape and scrim clicks can be cancelled with dialog-request-close.

<m3-dialog open headline="Dialog Title">
  <p>Dialog body text goes here.</p>
  <button slot="actions" onclick="this.closest('m3-dialog').close('action')">Cancel</button>
  <button slot="actions" onclick="this.closest('m3-dialog').close('action')">Confirm</button>
</m3-dialog>