Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Alert Dialog

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

Usage
example.blade.php 
<x-slate::alert-dialog>
    <x-slate::alert-dialog-trigger>
        <x-slate::button variant="outline">Show dialog</x-slate::button>
    </x-slate::alert-dialog-trigger>
    <x-slate::alert-dialog-content
        title="Are you absolutely sure?"
        description="This action cannot be undone. This will permanently delete your account and remove your data from our servers."
    >
        <x-slot:footer>
            <x-slate::alert-dialog-cancel>
                <x-slate::button variant="outline">Cancel</x-slate::button>
            </x-slate::alert-dialog-cancel>
            <x-slate::alert-dialog-action>
                <x-slate::button variant="destructive">Continue</x-slate::button>
            </x-slate::alert-dialog-action>
        </x-slot:footer>
    </x-slate::alert-dialog-content>
</x-slate::alert-dialog>

Composition
code 
AlertDialog
├── AlertDialogTrigger
└── AlertDialogContent
    ├── AlertDialogHeader / Title / Description
    └── AlertDialogFooter
        ├── AlertDialogCancel
        └── AlertDialogAction
Last updated .