Alert Dialog

Installation

Usage

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

Examples

Reduce Motion

Animation Presets

Slide Top

Slide Bottom

Scale Top

Scale Bottom

Scale Down

Perspective Top

Perspective Bottom

Perspective Left

Perspective Right

Wipe

Fade

Custom Animation

Transition Presets

Each animation comes with predefined transitionPreset

Alternatively, you can choose transition from this list:

Additionaly, you can control the duration of the transition:

<AlertDialogContent
  animationPreset="scale-down"
  transitionPreset={{
    ease: "inOutExpo",
    duration: 1,
  }}
/>

Custom Transition

API Reference

AlertDialog

Support all Root Radix API.

AlertDialogTrigger

Support all Trigger Radix API.

AlertDialogHeader

AlertDialogFooter

AlertDialogContent

AlertDialogTitle

Support all Title Radix API.

AlertDialogDescription

Support all Description Radix API.

AlertDialogAction

Support all Action Radix API.

AlertDialogCancel

Support all Cancel Radix API.