Loading...
Overlay that appears on top of the main content to display important information or prompt user interaction. It prevents interaction with the rest of the application while active, ensuring user focus on a specific task. Suitable for general-purpose overlays and non-destructive interactions such as forms, previews, or feature walkthroughs.
Supports modal and non-modal modes
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
Each animation comes with predefined
Alternatively, you can choose transition from this list:
Additionaly, you can control the duration of the transition:
| Prop | Type | Default |
|---|---|---|
showCloseButton | boolean | true |
animation | AnimationProps | ― |
animationPreset | enum | "motion" |
transition | Transition | ― |
transitionPreset | enumTransitionPreset | ― |
reduceMotion | boolean | false |
<Dialog>
<DialogTrigger />
<DialogContent>
<DialogHeader>
<DialogTitle />
<DialogDescription />
</DialogHeader>
<DialogFooter>
<DialogClose />
</DialogFooter>
</DialogContent>
</Dialog>
transitionPresetdefaultanticipatequickOutovershootOutswiftOutsnappyOutinOutinQuadinCubicinQuartinQuintinExpoinCircoutQuadoutCubicoutQuartoutQuintoutExpooutCirc<DialogContent
animationPreset="scale-down"
transitionPreset={{
ease: "inOutExpo",
duration: 1,
}}
/>
RootTriggerTitleDescriptionCloseinOutQuadinOutCubicinOutQuartinOutQuintinOutExpoinOutCircinOutBaseinoutlinear