Components / Alert Dialog

Alert Dialog

A blocking confirmation before a destructive or irreversible action: deleting a post, disconnecting an account, approving a spend change. The user must explicitly cancel or confirm.

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@layers/ui/alert-dialog'

Rendered stock

House rules

  • Reserve it for confirmations. Anything with fields or richer content is a Dialog.
  • AlertDialogAction is a plain Button and does not close the dialog by itself; drive open with controlled state and close after the action settles.
  • No optimistic destructive actions: the confirm button disables and shows a spinner while the mutation is pending.
  • AlertDialogCancel renders the outline Button and closes the dialog; keep it first in the footer.