Modal

Properties

Property	Type	Default	Description
size	"s" | "m" | "l"	"s"	The size of the modal.
offCanvas	boolean	-	Whether the modal should be displayed as an off canvas.
offCanvasOrientation	"left" | "right"	"right"	Whether the off canvas should be displayed on the right or left side of the screen.
controller	OverlayController	-	An overlay controller to control the modal state.
slot	string	-	Accepts "actionConfirm" to use the modal as a confirmation modal for an action.
isDismissable	boolean	-	Whether the modal can be closed by clicking outside of it.
showCloseButton	boolean	-	Whether the close button should be visible
confirmOnClose	boolean	-	Whether closing the modal must be confirmed – use it to protect unsaved changes.
children	ReactNode	-
wrapWith	ReactElement<unknown, string | JSXElementConstructor<any>>	-	A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup.
ref	Ref<HTMLSpanElement>	-	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see React Docs
key	Key	-
className	string	-	The elements class name.
isOpen	boolean	-	Whether the overlay is open. Use it to control the overlay state.
isDefaultOpen	boolean	false	Whether the overlay is open initially. Use it for an uncontrolled overlay.

Events

Property	Type	Default	Description
onOpenChange	OverlayOpenStateHandler	-	Called with the new open state whenever the overlay is opened or closed.
onClose	OverlayCloseHandler	-	Called when the overlay is closed.
onOpen	OverlayOpenHandler	-	Called when the overlay is opened.