Alert Dialog

Modal dialog that interrupts the user and requires a decision. Built on Radix UI — includes focus trap, escape key, and backdrop dismiss.

Anatomy

<AlertDialog>
  <AlertDialogTrigger />
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle />
      <AlertDialogDescription />
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel />
      <AlertDialogAction />
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Examples

Destructive

AlertDialogAction props

variant= 'default'

'default' | 'destructive'

Use 'destructive' for delete or irreversible actions.

children*

ReactNode

Button label.

Prop	Type	Default	Description
variant	'default' \| 'destructive'	'default'	Use 'destructive' for delete or irreversible actions.
children*	ReactNode	—	Button label.

PreviousTextarea NextCommand