blatui

Components

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

php artisan blatui:add alert-dialog 
<x-ui.alert-dialog>
    <x-ui.alert-dialog-trigger>
        <x-ui.button variant="outline">Show Dialog</x-ui.button>
    </x-ui.alert-dialog-trigger>
    <x-ui.alert-dialog-content>
        <x-ui.alert-dialog-header>
            <x-ui.alert-dialog-title>Are you absolutely sure?</x-ui.alert-dialog-title>
            <x-ui.alert-dialog-description>
                This action cannot be undone. This will permanently delete your account
                and remove your data from our servers.
            </x-ui.alert-dialog-description>
        </x-ui.alert-dialog-header>
        <x-ui.alert-dialog-footer>
            <x-ui.alert-dialog-cancel>Cancel</x-ui.alert-dialog-cancel>
            <x-ui.alert-dialog-action>Continue</x-ui.alert-dialog-action>
        </x-ui.alert-dialog-footer>
    </x-ui.alert-dialog-content>
</x-ui.alert-dialog>

Destructive

<x-ui.alert-dialog>
    <x-ui.alert-dialog-trigger>
        <x-ui.button variant="destructive">Delete project</x-ui.button>
    </x-ui.alert-dialog-trigger>
    <x-ui.alert-dialog-content>
        <x-ui.alert-dialog-header>
            <x-ui.alert-dialog-title>Delete this project?</x-ui.alert-dialog-title>
            <x-ui.alert-dialog-description>
                This permanently deletes the project and all of its data. This action cannot be undone.
            </x-ui.alert-dialog-description>
        </x-ui.alert-dialog-header>
        <x-ui.alert-dialog-footer>
            <x-ui.alert-dialog-cancel>Cancel</x-ui.alert-dialog-cancel>
            <x-ui.alert-dialog-action class="bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20">Delete</x-ui.alert-dialog-action>
        </x-ui.alert-dialog-footer>
    </x-ui.alert-dialog-content>
</x-ui.alert-dialog>

API Reference

Props, slots and exposed methods for <x-ui.alert-dialog>.

Props

Prop Type Default Description
open bool false Initial open state of the confirm dialog on first render.
id string — Enables "dispatchable" mode: opens/closes from anywhere via $dispatch('open-alert-dialog-{id}') / $dispatch('close-alert-dialog-{id}'). Ideal for a single shared confirm driven by per-row delete buttons in a loop (pair with <x-ui.alert-dialog-trigger for="{id}">). Pass row context in the event detail and read it from $event.detail.
for string — Set on <x-ui.alert-dialog-trigger>. Opens a dispatchable alert-dialog defined elsewhere (matching its id) instead of one in the same scope.

Slots

Slot Description
default Holds the <x-ui.alert-dialog-trigger> and <x-ui.alert-dialog-content>. The root only manages open state.
trigger The clickable element that opens the confirm, wrapped in <x-ui.alert-dialog-trigger>.
content The modal panel (<x-ui.alert-dialog-content>), teleported to <body>. Unlike a dialog it has no close button and no overlay-click dismiss — the user must choose an action. Compose it from <x-ui.alert-dialog-header>, <x-ui.alert-dialog-footer>, and a <x-ui.alert-dialog-cancel> / <x-ui.alert-dialog-action> pair.
cancel The dismiss button (<x-ui.alert-dialog-cancel>) styled as an outline button; closes the dialog after running any @click you add.
action The confirm button (<x-ui.alert-dialog-action>) styled as a primary button; runs any @click you add, then closes the dialog.