Dialog

A dialog creates a window overlaid on top of a page window, rendering the content underneath inert.

Demo

Open Dialog

dialog.html

<div x-init x-dialog>
  <button x-dialog:trigger>Open Dialog</button>

  <template x-teleport="body">
    <div x-dialog:content>
      <div x-dialog:overlay></div>

      <div>
        <h2 x-dialog:title>Dialog</h2>

        <p x-dialog:description>
          The dialog is commonly used for alerts, menus, and interactive
          prompts.
        </p>

        <button x-dialog:close>Close</button>
      </div>
    </div>
  </template>
</div>

Features

• Focus is automatically trapped in a modal
• Manages screen reader announcements with dialog title and description
• Clicking on overlay closes the modal
• Esc key closes the modal

View Source (opens in new tab)

Anatomy

<div x-init x-dialog>
  <button x-dialog:trigger></button>

  <template x-teleport="body">
    <div x-dialog:content>
      <div x-dialog:overlay></div>
      <h2 x-dialog:title></h2>
      <p x-dialog:description></p>
      <button x-dialog:close></button>
    </div>
  </template>
</div>

Note

Notice the x-init in the markup. This is required for Alpine to detect and run directives.

Directives

x-dialog

Required

---

The root element for the dialog.

Event	Description	detail
dialog:change	Whether the dialog is open or closed.	{ open: boolean }

Data Attribute	Values
[data-state]	open | closed

x-dialog:trigger

Required

---

Trigger button that opens or closes the dialog content.

Event	Description	detail
dialog:change	Whether the dialog is open or closed.	{ open: boolean }

Data Attribute	Values
[data-state]	open | closed

x-dialog:content

Required

---

The content that will be shown or hidden.

Event	Description	detail
dialog:change	Whether the dialog is open or closed.	{ open: boolean }

Data Attribute	Values
[data-state]	open | closed

x-dialog:overlay

---

Overlay for the page content. Closes the dialog when clicked on.

x-dialog:title

---

Dialog title announced to screen readers when opened.

x-dialog:description

---

Dialog description announced to screen readers when opened.

x-dialog:close

Required

---

Button to close the dialog when opened.