Components / Alert Dialog
Alert Dialog
A modal dialog that interrupts the user with important content and expects a response. Clicks on the overlay are ignored to ensure the user takes action.
<AlertDialog>
<AlertDialogTrigger>
Delete Account
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Delete Account</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog> <div class="group/alertdialog" data-alert-dialog-root data-state="closed" id="alert-1">
<!-- Trigger -->
<button class="inline-flex items-center justify-center rounded-full border border-slate-200 bg-white px-5 py-2.5 text-sm font-medium text-red-600 shadow-sm hover:bg-red-50 hover:border-red-200 transition-colors" data-alert-dialog-trigger>
Delete Account
</button>
<!-- Portal/Overlay (Hidden by default) -->
<div class="fixed inset-0 z-50 flex items-center justify-center" data-alert-dialog-portal style="display: none;">
<!-- Overlay -->
<div class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity opacity-0" data-alert-dialog-overlay></div>
<!-- Content -->
<div class="relative z-50 w-full max-w-lg rounded-2xl border border-slate-200 bg-white p-6 shadow-2xl transition-all opacity-0 scale-95" data-alert-dialog-content>
<!-- Header -->
<div class="flex flex-col space-y-2 text-center sm:text-left">
<h2 class="text-lg font-semibold text-slate-900">Are you absolutely sure?</h2>
<p class="text-sm text-slate-500">This action cannot be undone. This will permanently delete your account.</p>
</div>
<!-- Footer -->
<div class="mt-6 flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
<button class="mt-2 inline-flex h-10 items-center justify-center rounded-lg border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-900 ring-offset-white transition-colors hover:bg-slate-100 focus:outline-none sm:mt-0" data-alert-dialog-close>
Cancel
</button>
<button class="inline-flex h-10 items-center justify-center rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white ring-offset-white transition-colors hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2" data-alert-dialog-close>
Delete Account
</button>
</div>
</div>
</div>
</div>