isOpen
RequiredDescription
If true, the open will be opened.
Type
booleanDrawer
Drawer is a component for a panel that appears from the edge of the screen.
Props
DrawerProps
allowPinchZoom
Description
Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.
Type
booleanDefault
false.as
Type
"symbol" | "object" | "clipPath" | "filter" | "mask" | "marker" | "text" | "g" | "p" | "big" | "link" | "small" | "sub" | "sup" | "style" | "animate" | "section" | "a" | "abbr" | "address" | ... 148 more ... | "textPath"blankForDragProps
Description
Props for the blank area when closeOnDrag is true.
Type
CSSUIObjectblockScrollOnMount
Description
If true, scrolling will be disabled on the body when the modal opens.
Type
booleanDefault
truecloseOnDrag
Description
If true, then the drawer will close on drag.
Type
booleanDefault
falsecloseOnEsc
Description
If true, the modal will close when the Esc key is pressed.
Type
booleanDefault
truecloseOnOverlay
Description
If true, the modal will close when the overlay is clicked.
Type
booleanDefault
truecolorScheme
Description
The visual color appearance of the component.
Type
"whiteAlpha" | "blackAlpha" | "gray" | "neutral" | "red" | "danger" | "rose" | "pink" | "flashy" | "orange" | "warning" | "amber" | "yellow" | "lime" | "green" | "success" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "primary" | "info" | "link" | "indigo" | "violet" | "secondary" | "purple" | "fuchsia"containerProps
Description
Props for modal container element.
Type
HTMLUIProps<"div">dragConstraints
Description
Applies constraints on the permitted draggable area.
Type
numberDefault
0dragElastic
Description
The degree of movement allowed outside constraints. 0 = no movement, 1 = full movement.
Type
numberDefault
0.1dragOffset
Description
Offset from being dragged to closing.
Type
numberDefault
80dragVelocity
Description
Velocity of the drag that triggers close.
Type
numberDefault
100duration
Description
The animation duration.
Type
number | Partial<Record<"exit" | "enter", number>>finalFocusRef
Description
ref of the element to return focus to when FocusLock unmounts.
Type
RefObject<FocusableElement>initialFocusRef
Description
ref of the element to receive focus initially.
Type
RefObject<FocusableElement>isFullHeight
Description
If true and drawer's placement is top or bottom, the drawer will occupy the viewport height (100dvh).
Type
booleanlockFocusAcrossFrames
Description
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
falseonClose
Description
Callback invoked to close the modal.
Type
() => voidonCloseComplete
Description
Callback function to run side effects after the modal has closed.
Type
() => voidonEsc
Description
Callback fired when the escape key is pressed and focus is within modal.
Type
() => voidonOverlayClick
Description
Callback fired when the overlay is clicked.
Type
() => voidplacement
Description
The placement of the drawer.
Type
UIValue<"bottom" | "left" | "right" | "top">Default
'right'portalProps
Description
Props to be forwarded to the portal component.
Type
Omit<PortalProps, "children">restoreFocus
Description
If true, focus will be restored to the element that triggered the FocusLock once it unmounts.
Type
booleanDefault
falsesize
Description
The size of the Drawer.
Type
"xs" | "sm" | "md" | "lg" | "xl" | "full"Default
mdvariant
Description
The variant of the Drawer.
Type
stringwithCloseButton
Description
If true, display the modal close button.
Type
booleanDefault
truewithDragBar
Description
If true, display the drag bar when closeOnDrag is true.
Type
booleanDefault
truewithOverlay
Description
If true, display the modal overlay.
Type
booleanDefault
trueDrawerHeaderProps
DrawerBodyProps
DrawerFooterProps
DrawerOverlayProps
as
Type
"symbol" | "object" | "clipPath" | "filter" | "mask" | "marker" | "text" | "g" | "p" | "big" | "link" | "small" | "sub" | "sup" | "style" | "animate" | "section" | "a" | "abbr" | "address" | ... 148 more ... | "textPath"DrawerCloseButtonProps
disableRipple
Description
If true, disable ripple effects when pressing a element.
Type
booleanDefault
falseisDisabled
Description
If true, the button is disabled.
Type
booleanDefault
falseisRounded
Description
If true, the button is full rounded.
Type
booleanDefault
falseEdit this page on GitHub