Skip to content

Dialog

Native <dialog> modal with keyboard trap and backdrop styling. Use fap.js for open/close and backdrop-click-to-close.

Modal dialog

Confirm action

Are you sure you want to proceed? This action cannot be undone.

 
<button data-dialog-open="my-dialog">Open Dialog</button>

<dialog id="my-dialog">
  <header>Confirm action</header>
  <p>Are you sure you want to proceed?</p>
  <footer>
    <button data-outline data-dialog-close>Cancel</button>
    <button data-dialog-close>Confirm</button>
  </footer>
</dialog>