Dialog

The Dialog component is a flexible, accessible modal dialog that can be used for a variety of interactive content. Ideal for forms, notifications, or additional content, this dialog component focuses user attention on a specific task or message without distractions.

<div x-data="dialog">
    <button x-ref="trigger" class="demo-button">Open Dialog</button>
    <template x-teleport="body">
        <div x-ref="wrapper" x-bind="wrapperProps" class="fixed top-0 left-0 z-[99] flex items-center justify-center w-screen h-screen">
            <div x-ref="backdrop" x-bind="backdropProps" class="absolute inset-0 size-full bg-black bg-opacity-50 backdrop-blur-sm"></div>
            <div x-ref="content" x-bind="contentProps" class="bg-white relative w-full py-6 px-7 sm:max-w-lg rounded-lg mx-4">
                <h2 x-ref="title" class="text-lg font-semibold pb-2 me-8">Dialog Title</h2>
                <button x-ref="close" x-bind="closeProps" class="absolute top-3 right-3 demo-button icon">
                    <span class="sr-only">Close dialog</span>
                    <svg aria-hidden="true" class="size-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
                </button>
                <p x-ref="description">
                    This is placeholder text. Replace it with your own content.
                </p>
                <div class="flex gap-3 justify-end pt-4">
                    <button class="demo-button primary" @click="console.log('continued'); closeDialog();">Continue</button>
                </div>
            </div>
        </div>
    </template>
</div>

Structure

<div x-data="dialog">
  <button x-ref="trigger">Open Dialog</button>
  <template x-teleport="body">
      <div x-ref="wrapper" x-bind="wrapperProps">
          <div x-ref="backdrop" x-bind="backdropProps"></div>
          <div x-ref="content" x-bind="contentProps">
              <h2 x-ref="title"></h2>
              <button x-ref="close" x-bind="closeProps"></button>
              <p x-ref="description"></p>
          </div>
      </div>
  </template>
</div>

API Reference

 x-data="dialog"

The root component containing the state and functionality.

Property	Type	Description	Default
`open`	boolean	The open state of the dialog	`false`
`onOpenChange`	function	Callback when the open state changes	`null`