Dialog
The Dialog component serves as a pop-up or modal window that overlays the main content, allowing the display of important messages, forms, or user interactions while grabbing user’s focus.
Examples
Basic Dialog
Dialog with Footer and Custom header
Custom Animation
Define custom animations for the dialog, using the animation, animationViewChange props:
Learn more about how to customize the animations in the Custom Animations section.
Theme
This component uses the following default theme:
- root{}(5 keys)
- Show all
Learn more about how to customize in the Theme documentation.
API
| Prop | Description | Default |
|---|---|---|
className | The CSS class name for the root element of the component.string | |
innerClassName | The CSS class name for the inner content element of the component.string | |
contentClassName | The CSS class name for the content of the component.string | |
size | The size of the dialog. Can be a string or a number.string | number | 50% |
showCloseButton | Whether to show the close button in the dialog header.boolean | true |
children | The content of the dialog.any | |
disablePadding | Whether to disable padding for the dialog content.boolean | false |
footer | The footer of the dialog.any | |
header | The header of the dialog.any | |
headerElement | The React element for the dialog header.ReactElement<DialogHeaderProps, FC<DialogHeaderProps>> | <DialogHeader /> |
theme | Theme for the Dialog.DialogTheme | |
initial | Properties, variant label or array of variant labels to start in.
Set to `false` to initialise with the values in `animate` (disabling the mount animation)
```jsx
// As values
<motion.div initial={{ opacity: 1 }} />
// As variant
<motion.div initial="visible" variants={variants} />
// Multiple variants
<motion.div initial={["visible", "active"]} variants={variants} />
// As false (disable mount animation)
<motion.div initial={false} animate={{ opacity: 0 }} />
```
@deprecated Use animation configuration instead.boolean | TargetAndTransition | VariantLabels | |
animate | Values to animate to, variant label(s), or `LegacyAnimationControls`.
```jsx
// As values
<motion.div animate={{ opacity: 1 }} />
// As variant
<motion.div animate="visible" variants={variants} />
// Multiple variants
<motion.div animate={["visible", "active"]} variants={variants} />
// LegacyAnimationControls
<motion.div animate={animation} />
```
@deprecated Use animation configuration instead.boolean | TargetAndTransition | VariantLabels | |
exit | A target to animate to when this component is removed from the tree.
This component **must** be the first animatable child of an `AnimatePresence` to enable this exit animation.
This limitation exists because React doesn't allow components to defer unmounting until after
an animation is complete. Once this limitation is fixed, the `AnimatePresence` component will be unnecessary.
```jsx
import { AnimatePresence, motion } from 'framer-motion'
export const MyComponent = ({ isVisible }) => {
return (
<AnimatePresence>
{isVisible && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
/>
)}
</AnimatePresence>
)
}
```
@deprecated Use animation configuration instead.TargetAndTransition | VariantLabels | |
transition | Default transition. If no `transition` is defined in `animate`, it will use the transition defined here.
```jsx
const spring = {
type: "spring",
damping: 10,
stiffness: 100
}
<motion.div transition={spring} animate={{ scale: 1.2 }} />
```
@deprecated Use animation configuration instead.Transition<any> | |
animation | Animation configuration for the dialog.MotionNodeAnimationOptions | |
open * | If true, the global overlay is open.boolean | |
closeOnBackdropClick | If true, the global overlay will close when the backdrop is clicked.boolean | true |
hasBackdrop | If true, the global overlay will have a backdrop.boolean | true |
backdropClassName | The CSS class name to be applied to the backdrop of the global overlay.string | |
closeOnEscape | If true, the global overlay will close when the escape key is pressed.boolean | true |
onClose | A function that is called when the global overlay is closed.() => void |
Last updated on