Loading...
A modal dialog used for critical interactions, such as confirming destructive or irreversible actions. It interrupts the user flow to present important information and requires a clear, intentional decision. The dialog disables background interaction to ensure users cannot dismiss it accidentally.
Focus is automatically trapped within modal
Can be controlled or uncontrolled
Manages screen reader announcements
Keyboard support
Animated with Motion
Respects reduce motion via system settings and props
Built with:
Each animation comes with predefined
Alternatively, you can choose transition from this list:
Additionaly, you can control the duration of the transition:
Support all Radix API
Support all Radix API
| Prop | Type | Default |
|---|---|---|
animation | AnimationProps | ― |
animationPreset | enum | "motion" |
transition | Transition | ― |
transitionPreset | enumTransitionPreset | ― |
reduceMotion | boolean | false |
warningAnimation | boolean | true |
Support all Radix API
Support all Radix API
Support all Radix API
Support all Radix API
<AlertDialog>
<AlertDialogTrigger />
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle />
<AlertDialogDescription />
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel />
<AlertDialogAction />
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
transitionPresetdefaultanticipatequickOutovershootOutswiftOutsnappyOutinOutinQuadinCubicinQuartinQuintinExpoinCircoutQuadoutCubicoutQuartoutQuintoutExpooutCircinOutQuadinOutCubicinOutQuartinOutQuintinOutExpoinOutCircinOutBaseinoutlinear<AlertDialogContent
animationPreset="scale-down"
transitionPreset={{
ease: "inOutExpo",
duration: 1,
}}
/>
RootTriggerTitleDescriptionActionCancel