isOpen
RequiredDescription
If true
, the open will be opened.
Type
boolean
Leave Yamada UI a star
StarModal
is a component that is displayed over the main content to focus the user's attention solely on the information.
Description
If true
, the open will be opened.
Type
boolean
Description
Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.
Type
boolean
Default
false.
Description
The animation of the tooltip.
Type
"bottom" | "left" | "right" | "scale" | "top" | "none"
Default
'scale'
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"
Description
If true
, scrolling will be disabled on the body
when the modal opens.
Type
boolean
Default
true
Description
If true
, the modal will close when the Esc
key is pressed.
Type
boolean
Default
true
Description
If true
, the modal will close when the overlay is clicked.
Type
boolean
Default
true
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"
Description
Props for modal container element.
Type
HTMLUIProps
Description
The animation duration.
Type
number | MotionLifecycleProps<number>
Description
ref
of the element to return focus to when FocusLock
unmounts.
Type
RefObject<FocusableElement>
Description
ref
of the element to receive focus initially.
Type
RefObject<FocusableElement>
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
boolean
Default
false
Description
Callback invoked to close the modal.
Type
() => void
Description
Callback function to run side effects after the modal has closed.
Type
() => void
Description
Callback fired when the escape key is pressed and focus is within modal.
Type
() => void
Description
Callback fired when the overlay is clicked.
Type
() => void
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">
Description
The placement of the modal.
Type
UIValue<| "bottom"
| "left"
| "right"
| "top"
| "center"
| "bottom-left"
| "bottom-right"
| "top-left"
| "top-right">
Default
'center'
Description
Props to be forwarded to the portal component.
Type
Omit<PortalProps, "children">
Description
If true
, focus will be restored to the element that triggered the FocusLock
once it unmounts.
Type
boolean
Default
false
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'
Description
The size of the Modal.
Type
"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full"
Default
"md"
Description
The variant of the Modal.
Type
string
Description
If true
, display the modal close button.
Type
boolean
Default
true
Description
If true
, display the modal overlay.
Type
boolean
Default
true
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"
Description
If true
, disable ripple effects when pressing a element.
Type
boolean
Default
false
Description
If true
, the button is disabled.
Type
boolean
Default
false
Description
If true, the button is full rounded.
Type
boolean
Default
false
Edit this page on GitHub