components

Alert dialog

An alert dialog is a hard stop. Use it when doing nothing isn't a safe default — deleting data, publishing, logging everyone out. Every other interruption belongs in a Dialog.

Read the full spec

Destructive confirmation

Red confirm button, outline cancel. Initial focus lands on Cancel — the safer choice — to prevent accidental Enter-key activation of the destructive path.

tsx

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Delete report</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Delete this report?</AlertDialogTitle>
      <AlertDialogDescription>
        The report will be removed from the feed. This can't be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel className={buttonVariants({ variant: "outline" })}>
        Cancel
      </AlertDialogCancel>
      <AlertDialogAction className={buttonVariants({ variant: "destructive" })}>
        Delete report
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Non-destructive confirmation

Use the default (brand) variant on the confirm action when the operation is significant but not destructive — e.g. publishing, sending.