If true, the modal will be open.
Alert Dialog
AlertDialog component is used to interrupt the user with a mandatory confirmation or action.
Props#
AlertDialog and its components compose the Modal component. The only
exception is that it requires a leastDestructiveRef which is similar to the
initialFocusRef of Modal.
isOpenrequired
isOpenrequiredDescription
Type
booleanleastDestructiveRefrequired
leastDestructiveRefrequiredType
RefObject<FocusableElement>onCloserequired
onCloserequiredDescription
Callback invoked to close the modal.
Type
() => voidallowPinchZoom
allowPinchZoomDescription
Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.
Type
booleanDefault
false.autoFocus
autoFocusDescription
If true, the modal will autofocus the first enabled and interactive
element within the ModalContent
Type
booleanDefault
trueblockScrollOnMount
blockScrollOnMountDescription
If true, scrolling will be disabled on the body when the modal opens.
Type
booleanDefault
truecloseOnEsc
closeOnEscDescription
If true, the modal will close when the Esc key is pressed
Type
booleanDefault
truecloseOnOverlayClick
closeOnOverlayClickDescription
If true, the modal will close when the overlay is clicked
Type
booleanDefault
truefinalFocusRef
finalFocusRefDescription
The ref of element to receive focus when the modal closes.
Type
RefObject<FocusableElement>id
idDescription
The id of the modal
Type
stringisCentered
isCenteredDescription
If true, the modal will be centered on screen.
Type
booleanDefault
falselockFocusAcrossFrames
lockFocusAcrossFramesDescription
Enables aggressive focus capturing within iframes.
- If true: keep focus in the lock, no matter where lock is active
- If false: allows focus to move outside of iframe
Type
booleanDefault
falsemotionPreset
motionPresetDescription
The transition that should be used for the modal
Type
MotionPresetDefault
scaleonCloseComplete
onCloseCompleteDescription
Fires when all exiting nodes have completed animating out
Type
() => voidonEsc
onEscDescription
Callback fired when the escape key is pressed and focus is within modal
Type
() => voidonOverlayClick
onOverlayClickDescription
Callback fired when the overlay is clicked.
Type
() => voidportalProps
portalPropsDescription
Props to be forwarded to the portal component
Type
Pick<
PortalProps,
"appendToParentPortal" | "containerRef"
>preserveScrollBarGap
preserveScrollBarGapDescription
If true, a `padding-right` will be applied to the body element
that's equal to the width of the scrollbar.
This can help prevent some unpleasant flickering effect
and content adjustment when the modal opens
Type
booleanDefault
truereturnFocusOnClose
returnFocusOnCloseDescription
If true, the modal will return focus to the element that triggered it when it closes.
Type
booleanDefault
truescrollBehavior
scrollBehaviorDescription
Where scroll behavior should originate.
- If set to inside, scroll only occurs within the ModalBody.
- If set to outside, the entire ModalContent will scroll within the viewport.
Type
ScrollBehaviorDefault
outsidetrapFocus
trapFocusDescription
If false, focus lock will be disabled completely.
This is useful in situations where you still need to interact with
other surrounding elements.
🚨Warning: We don't recommend doing this because it hurts the
accessibility of the modal, based on WAI-ARIA specifications.
Type
booleanDefault
trueuseInert
useInertDescription
A11y: If true, the siblings of the modal will have `aria-hidden`
set to true so that screen readers can only see the modal.
This is commonly known as making the other elements **inert**
Type
booleanDefault
true