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
isOpenrequiredbooleanleastDestructiveRefrequired
leastDestructiveRefrequiredRefObject<FocusableElement>onCloserequired
onCloserequiredCallback invoked to close the modal.
() => voidallowPinchZoom
allowPinchZoomHandle zoom/pinch gestures on iOS devices when scroll locking is enabled.
booleanfalse.autoFocus
autoFocusIf true, the modal will autofocus the first enabled and interactive
element within the ModalContent
booleantrueblockScrollOnMount
blockScrollOnMountIf true, scrolling will be disabled on the body when the modal opens.
booleantruecloseOnEsc
closeOnEscIf true, the modal will close when the Esc key is pressed
booleantruecloseOnOverlayClick
closeOnOverlayClickIf true, the modal will close when the overlay is clicked
booleantruefinalFocusRef
finalFocusRefThe ref of element to receive focus when the modal closes.
RefObject<FocusableElement>id
idThe id of the modal
stringisCentered
isCenteredIf true, the modal will be centered on screen.
booleanfalselockFocusAcrossFrames
lockFocusAcrossFramesEnables 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
booleanfalsemotionPreset
motionPresetThe transition that should be used for the modal
MotionPresetscaleonCloseComplete
onCloseCompleteFires when all exiting nodes have completed animating out
() => voidonEsc
onEscCallback fired when the escape key is pressed and focus is within modal
() => voidonOverlayClick
onOverlayClickCallback fired when the overlay is clicked.
() => voidportalProps
portalPropsProps to be forwarded to the portal component
Pick<
PortalProps,
"appendToParentPortal" | "containerRef"
>preserveScrollBarGap
preserveScrollBarGapIf 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
booleantruereturnFocusOnClose
returnFocusOnCloseIf true, the modal will return focus to the element that triggered it when it closes.
booleantruescrollBehavior
scrollBehaviorWhere 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.
ScrollBehavioroutsidetrapFocus
trapFocusIf 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.
booleantrueuseInert
useInertA11y: 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**
booleantrueProps#
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
isOpenrequiredIf true, the modal will be open.
booleanleastDestructiveRefrequired
leastDestructiveRefrequiredRefObject<FocusableElement>onCloserequired
onCloserequiredCallback invoked to close the modal.
() => voidallowPinchZoom
allowPinchZoomHandle zoom/pinch gestures on iOS devices when scroll locking is enabled.
booleanfalse.autoFocus
autoFocusIf true, the modal will autofocus the first enabled and interactive
element within the ModalContent
booleantrueblockScrollOnMount
blockScrollOnMountIf true, scrolling will be disabled on the body when the modal opens.
booleantruecloseOnEsc
closeOnEscIf true, the modal will close when the Esc key is pressed
booleantruecloseOnOverlayClick
closeOnOverlayClickIf true, the modal will close when the overlay is clicked
booleantruefinalFocusRef
finalFocusRefThe ref of element to receive focus when the modal closes.
RefObject<FocusableElement>id
idThe id of the modal
stringisCentered
isCenteredIf true, the modal will be centered on screen.
booleanfalselockFocusAcrossFrames
lockFocusAcrossFramesEnables 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
booleanfalsemotionPreset
motionPresetThe transition that should be used for the modal
MotionPresetscaleonCloseComplete
onCloseCompleteFires when all exiting nodes have completed animating out
() => voidonEsc
onEscCallback fired when the escape key is pressed and focus is within modal
() => voidonOverlayClick
onOverlayClickCallback fired when the overlay is clicked.
() => voidportalProps
portalPropsProps to be forwarded to the portal component
Pick<
PortalProps,
"appendToParentPortal" | "containerRef"
>preserveScrollBarGap
preserveScrollBarGapIf 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
booleantruereturnFocusOnClose
returnFocusOnCloseIf true, the modal will return focus to the element that triggered it when it closes.
booleantruescrollBehavior
scrollBehaviorWhere 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.
ScrollBehavioroutsidetrapFocus
trapFocusIf 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.
booleantrueuseInert
useInertA11y: 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**
booleantrue