OrganismsAlert Dialog

Alert Dialog

@velon-finance/ui · status: stable · organism · @radix-ui/react-alert-dialog

For destructive confirmations. Cannot be dismissed by clicking outside or pressing ESC. the user must explicitly choose Cancel or Action.

Overview

When to use vs Dialog

  • AlertDialog. destructive or irreversible: delete account, force-cancel a charge, confirm a transfer above limit.
  • Dialog. neutral or constructive: edit a profile, view details, fill a form.

Code

<AlertDialog>
  <AlertDialogTrigger asChild><Button variant="destructive">Delete</Button></AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>This is permanent.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
Dialog V2Sheet