Dialog / Modal Component

The native HTML <dialog> element provides built-in accessibility, backdrop overlay, and top-layer positioning.

Interactive Example

Click the button below to open the modal. Use the close button or press Esc to dismiss.

Are you absolutely sure?

This action cannot be undone. This will permanently delete your account from our servers.

Example Code 
<button type="button" onclick="document.getElementById('demo-dialog').showModal()">
  Open Dialog
</button>

<dialog id="demo-dialog" role="alertdialog">
  <header>
    <h3>Are you absolutely sure?</h3>
  </header>
  <p>This action cannot be undone. This will permanently delete your account from our servers.</p>
  <footer>
    <form method="dialog">
      <button value="cancel">Cancel</button>
      <button value="confirm">Continue</button>
    </form>
  </footer>
</dialog>