Alert Dialog

The Alert Dialog component is a modal dialog designed for critical messages that require user attention. It’s perfect for displaying alerts, confirmations, or actions that users need to acknowledge before proceeding, ensuring they focus on important information in a clear, accessible way.

<div x-data="alertDialog">
    <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">Alert Dialog Title</h2>
                <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" x-bind="closeProps">Cancel</button>
                    <button class="demo-button primary" @click="console.log('continued'); closeDialog();">Continue</button>
                </div>
            </div>
        </div>
    </template>
</div>

Structure

<div x-data="alertDialog">
  <button x-ref="trigger"></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>
              <p x-ref="description"></p>
              <button x-bind="closeProps"></button>
              <button @click="closeDialog();"></button>
          </div>
      </div>
  </template>
</div>

API Reference

 x-data="alertDialog"

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`