allowPinchZoom
Description
Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.
Type
booleanDefault
false.Modal
Modal is a component that is displayed over the main content to focus the user's attention solely on the information.
Props
ModalProps
animation
Description
The animation of the tooltip.
Type
"bottom" | "left" | "right" | "scale" | "top" | "none"Default
'scale'as
Description
The HTML element to render.
Type
"symbol" | "object" | "clipPath" | "filter" | "g" | "marker" | "mask" | "p" | "text" | "style" | "animate" | "section" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 150 more ... | "textPath"blockScrollOnMount
Description
If true, scrolling will be disabled on the body when the modal opens.
Type
booleanDefault
truecloseOnEsc
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
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"containerProps
Description
Props for modal container element.
Type
HTMLUIPropsduration
Description
The animation duration.
Type
number | MotionLifecycleProps<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>isOpen
DeprecatedDescription
If true, the open will be opened.
Deprecated
Use open instead.
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
() => voidopen
Description
If true, the open will be opened.
Type
booleanoutside
Description
The CSS padding property.
Type
UIValue<number | "px" | "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-0.5" | "-1" | ... 99 more ... | "xs">placement
Description
The placement of the modal.
Type
UIValue<| "bottom"
| "left"
| "right"
| "top"
| "center"
| "bottom-left"
| "bottom-right"
| "top-left"
| "top-right">Default
'center'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
falsescrollBehavior
Description
Where scroll behavior should originate.
- inside: scroll only occurs within the ModalBody.
- outside: the entire ModalContent will scroll within the viewport.
Type
"outside" | "inside"Default
'inside'size
Description
The size of the Modal.
Type
"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full"Default
"md"variant
Description
The variant of the Modal.
Type
stringwithCloseButton
Description
If true, display the modal close button.
Type
booleanDefault
truewithOverlay
Description
If true, display the modal overlay.
Type
booleanDefault
trueModalHeaderProps
ModalBodyProps
ModalFooterProps
ModalOverlayProps
as
Description
The HTML element to render.
Type
"symbol" | "object" | "clipPath" | "filter" | "g" | "marker" | "mask" | "p" | "text" | "style" | "animate" | "section" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 150 more ... | "textPath"ModalCloseButtonProps
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