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
.
isOpen
Required
isOpen
Required
boolean
leastDestructiveRef
Required
leastDestructiveRef
Required
RefObject<FocusableElement>
onClose
Required
onClose
Required
Callback invoked to close the modal.
() => void
allowPinchZoom
allowPinchZoom
Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.
boolean
false.
autoFocus
autoFocus
If true
, the modal will autofocus the first enabled and interactive
element within the ModalContent
boolean
true
blockScrollOnMount
blockScrollOnMount
If true
, scrolling will be disabled on the body
when the modal opens.
boolean
true
closeOnEsc
closeOnEsc
If true
, the modal will close when the Esc
key is pressed
boolean
true
closeOnOverlayClick
closeOnOverlayClick
If true
, the modal will close when the overlay is clicked
boolean
true
finalFocusRef
finalFocusRef
The ref
of element to receive focus when the modal closes.
RefObject<FocusableElement>
id
id
The id
of the modal
string
isCentered
isCentered
If true
, the modal will be centered on screen.
boolean
false
lockFocusAcrossFrames
lockFocusAcrossFrames
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
boolean
false
motionPreset
motionPreset
The transition that should be used for the modal
MotionPreset
scale
onCloseComplete
onCloseComplete
Fires when all exiting nodes have completed animating out
() => void
onEsc
onEsc
Callback fired when the escape key is pressed and focus is within modal
() => void
onOverlayClick
onOverlayClick
Callback fired when the overlay is clicked.
() => void
portalProps
portalProps
Props to be forwarded to the portal component
Pick<
PortalProps,
"appendToParentPortal" | "containerRef"
>
preserveScrollBarGap
preserveScrollBarGap
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
boolean
true
returnFocusOnClose
returnFocusOnClose
If true
, the modal will return focus to the element that triggered it when it closes.
boolean
true
scrollBehavior
scrollBehavior
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.
ScrollBehavior
outside
trapFocus
trapFocus
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.
boolean
true
useInert
useInert
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**
boolean
true
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
.
isOpen
Required
isOpen
Required
If true
, the modal will be open.
boolean
leastDestructiveRef
Required
leastDestructiveRef
Required
RefObject<FocusableElement>
onClose
Required
onClose
Required
Callback invoked to close the modal.
() => void
allowPinchZoom
allowPinchZoom
Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.
boolean
false.
autoFocus
autoFocus
If true
, the modal will autofocus the first enabled and interactive
element within the ModalContent
boolean
true
blockScrollOnMount
blockScrollOnMount
If true
, scrolling will be disabled on the body
when the modal opens.
boolean
true
closeOnEsc
closeOnEsc
If true
, the modal will close when the Esc
key is pressed
boolean
true
closeOnOverlayClick
closeOnOverlayClick
If true
, the modal will close when the overlay is clicked
boolean
true
finalFocusRef
finalFocusRef
The ref
of element to receive focus when the modal closes.
RefObject<FocusableElement>
id
id
The id
of the modal
string
isCentered
isCentered
If true
, the modal will be centered on screen.
boolean
false
lockFocusAcrossFrames
lockFocusAcrossFrames
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
boolean
false
motionPreset
motionPreset
The transition that should be used for the modal
MotionPreset
scale
onCloseComplete
onCloseComplete
Fires when all exiting nodes have completed animating out
() => void
onEsc
onEsc
Callback fired when the escape key is pressed and focus is within modal
() => void
onOverlayClick
onOverlayClick
Callback fired when the overlay is clicked.
() => void
portalProps
portalProps
Props to be forwarded to the portal component
Pick<
PortalProps,
"appendToParentPortal" | "containerRef"
>
preserveScrollBarGap
preserveScrollBarGap
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
boolean
true
returnFocusOnClose
returnFocusOnClose
If true
, the modal will return focus to the element that triggered it when it closes.
boolean
true
scrollBehavior
scrollBehavior
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.
ScrollBehavior
outside
trapFocus
trapFocus
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.
boolean
true
useInert
useInert
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**
boolean
true