Dialog

A commercial license is required to use Tailwind Plus Elements.

The <el-dialog> component is a lightweight wrapper around the native <dialog> element that adds scroll locking, click-outside-to-close support, and smooth exit transitions that work consistently across all browsers. It builds on standard HTML APIs while making dialogs easier to use and style.

Component API

<el-dialog>

Wrapper around the native <dialog> element used to manage the open state and transitions.

Attributes
`open`	A boolean attribute that indicates whether the dialog is open or closed. You can change the attribute to dynamically open or close the dialog.
Data attributes (Read-only)
`data-closed`	Present before transitioning in, and when transitioning out.
`data-enter`	Present when transitioning in.
`data-leave`	Present when transitioning out.
`data-transition`	Present when transitioning in or out.
Events
`open`	Dispatched when the dialog is opened in any way other than by updating the `open` attribute.
`close`	Dispatched when the dialog is closed in any way other than by updating the `open` attribute.
`cancel`	Dispatched when the user attempts to dismiss the dialog via Escape key or clicking outside. Calling `preventDefault()` prevents the dialog from closing.
Methods
`show()`	Shows the dialog in modal mode.
`hide()`	Hides the dialog. Takes an optional object with a `restoreFocus` property to disable the default focus restoration.

<dialog>

The native dialog element.

Commands
`show-modal`	Opens the dialog.
`close`	Closes the dialog.

<el-dialog-backdrop>

The visual backdrop behind your dialog panel.

Data attributes (Read-only)
`data-closed`	Present before transitioning in, and when transitioning out.
`data-enter`	Present when transitioning in.
`data-leave`	Present when transitioning out.
`data-transition`	Present when transitioning in or out.

<el-dialog-panel>

The main content area of your dialog. Clicking outside of this will trigger the dialog to close.

Data attributes (Read-only)
`data-closed`	Present before transitioning in, and when transitioning out.
`data-enter`	Present when transitioning in.
`data-leave`	Present when transitioning out.
`data-transition`	Present when transitioning in or out.

Examples

Basic example

Use the <el-dialog> and <el-dialog-panel> components, along with a native <dialog>, to build a dialog:

<button command="show-modal" commandfor="delete-profile" type="button">
  Delete profile
</button>

<el-dialog>
  <dialog id="delete-profile">
    <el-dialog-panel>
      <form method="dialog">
        <h3>Delete profile</h3>
        <p>Are you sure? This action is permanent and cannot be undone.</p>
        <div class="flex gap-4">
          <button command="close" commandfor="delete-profile" type="button">Cancel</button>
          <button type="submit">Delete</button>
        </div>
      </form>
    </el-dialog-panel>
  </dialog>
</el-dialog>

Opening the dialog

You can open dialogs using the show-modal invoker command:

<button command="show-modal" commandfor="delete-profile" type="button">
  Open dialog
</button>

<el-dialog>
  <dialog id="delete-profile"><!-- ... --></dialog>
</el-dialog>

Alternatively you can add the open attribute to the <el-dialog> to open it:

- <el-dialog>
+ <el-dialog open>
    <dialog><!-- ... --></dialog>
  </el-dialog>

You can also programmatically open the dialog using the show() method on <el-dialog>:

<el-dialog id="delete-profile">
  <dialog><!-- ... --></dialog>
</el-dialog>

<script type="module">
  const dialog = document.getElementById('delete-profile');
  dialog.show();
</script>

Closing the dialog

You can close dialogs using the close invoker command:

<button command="close" commandfor="delete-profile" type="button">
  Close dialog
</button>

<el-dialog>
  <dialog id="delete-profile"><!-- ... --></dialog>
</el-dialog>

Alternatively you can remove the open attribute from the <el-dialog> to close it:

- <el-dialog open>
+ <el-dialog>
    <dialog><!-- ... --></dialog>
  </el-dialog>

You can also programmatically close the dialog using the hide() method on <el-dialog>:

<el-dialog id="delete-profile">
  <dialog><!-- ... --></dialog>
</el-dialog>

<script type="module">
  const dialog = document.getElementById('delete-profile');
  dialog.hide();
</script>

Adding a backdrop

Use the <el-dialog-backdrop> component to add a backdrop behind your dialog panel:

<el-dialog>
  <dialog class="backdrop:bg-transparent">
    <el-dialog-backdrop class="bg-black/50" />
    <el-dialog-panel><!-- ... --></el-dialog-panel>
  </dialog>
</el-dialog>

The primary benefit of using the <el-dialog-backdrop> component over the native ::backdrop pseudo-element is that it can be transitioned reliably using CSS.

Adding transitions

To animate the opening and closing of the dialog, target the data-closed, data-enter, data-leave, and data-transition attributes with CSS to style the different stages of the transition:

<el-dialog>
  <dialog class="backdrop:bg-transparent">
    <el-dialog-backdrop class="bg-black/50 transition duration-200 data-closed:opacity-0" />
    <el-dialog-panel class="bg-white transition duration-200 data-closed:scale-95 data-closed:opacity-0">
      <!-- ... -->
    </el-dialog-panel>
  </dialog>
</el-dialog>

Getting started

Elements