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:

default
anticipate
quickOut
overshootOut
swiftOut
snappyOut
inOut
inQuad
inCubic
inQuart
inQuint
inExpo
inCirc
outQuad
outCubic
outQuart
outQuint
outExpo
outCirc
inOutQuad
inOutCubic
inOutQuart
inOutQuint
inOutExpo
inOutCirc
inOutBase
in
out
linear

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

Prop	Type	Default
`animation`	`AnimationProps`	`―`
`animationPreset`	`enum`	`"motion"`
`transition`	`Transition`	`―`
`transitionPreset`	`enumTransitionPreset`	`―`
`reduceMotion`	`boolean`	`false`
`warningAnimation`	`boolean`	`true`

AlertDialogTitle

Support all Title Radix API

AlertDialogDescription

Support all Description Radix API

AlertDialogAction

Support all Action Radix API

AlertDialogCancel

Support all Cancel Radix API