If true, the modal will be open.
Drawer
The Drawer component is a panel that slides out from the edge of the screen. It can be useful when you need users to complete a task or view some details without leaving the current page.
Props#
Drawer Props#
Drawer composes the Modal component with these extra props:
isOpenrequired
isOpenrequiredDescription
Type
booleanonCloserequired
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
truecolorScheme
colorSchemeDescription
The visual color appearance of the component
Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"finalFocusRef
finalFocusRefDescription
The ref of element to receive focus when the modal closes.
Type
RefObject<FocusableElement>id
idDescription
The id of the modal
Type
stringinitialFocusRef
initialFocusRefDescription
The ref of element to receive focus when the modal opens.
Type
RefObject<FocusableElement>isFullHeight
isFullHeightDescription
If true and drawer's placement is top or bottom,
the drawer will occupy the viewport height (100vh)
Type
booleanlockFocusAcrossFrames
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
falseonCloseComplete
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
() => voidplacement
placementDescription
The placement of the drawer
Type
SlideDirection | LogicalPlacementDefault
rightportalProps
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
truesize
sizeDescription
The size of the Drawer
Type
"xs" | "sm" | "md" | "lg" | "xl" | "full"Default
xstrapFocus
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
truevariant
variantDescription
The variant of the Drawer
Type
stringOther components#
DrawerOverlay,DrawerFooter,DrawerHeaderandDrawerBodycomposesBoxcomponentDrawerCloseButtoncomposesCloseButton
Props#
Drawer Props#
Drawer composes the Modal component with these extra props:
isOpenrequired
isOpenrequiredDescription
If true, the modal will be open.
Type
booleanonCloserequired
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
truecolorScheme
colorSchemeDescription
The visual color appearance of the component
Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"finalFocusRef
finalFocusRefDescription
The ref of element to receive focus when the modal closes.
Type
RefObject<FocusableElement>id
idDescription
The id of the modal
Type
stringinitialFocusRef
initialFocusRefDescription
The ref of element to receive focus when the modal opens.
Type
RefObject<FocusableElement>isFullHeight
isFullHeightDescription
If true and drawer's placement is top or bottom,
the drawer will occupy the viewport height (100vh)
Type
booleanlockFocusAcrossFrames
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
falseonCloseComplete
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
() => voidplacement
placementDescription
The placement of the drawer
Type
SlideDirection | LogicalPlacementDefault
rightportalProps
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
truesize
sizeDescription
The size of the Drawer
Type
"xs" | "sm" | "md" | "lg" | "xl" | "full"Default
xstrapFocus
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
truevariant
variantDescription
The variant of the Drawer
Type
stringOther components#
DrawerOverlay,DrawerFooter,DrawerHeaderandDrawerBodycomposesBoxcomponentDrawerCloseButtoncomposesCloseButton