5-day Mini-Course

Build UIs that don’t suck.

Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.

Get the free course

Dialog

A commercial license is required to use Tailwind Plus Elements. Purchase Tailwind Plus to obtain a license.

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.
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.