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>