Full screen modal

Full screen modal is an immersive takeover of the entire viewport. The background content pushes back and dims while the modal scales up from the center.

#Import

#Example

#Guidelines

#When to use

• For builder or editor experiences that need the whole screen.

#When not to use

• If presenting information or a form, use a dialog instead.
• If showing a detail or edit view alongside the page context, use a drawer instead.

#Props

Name	Default	Description
isOpen	—	booleanWhether the modal is open.
onClose	—	() => voidCallback invoked to close the modal.
onCloseComplete	—	() => voidCallback invoked once the close animation has finished, for work that should wait until the modal is gone.
children	—	ReactNodeModal content.
containerRef	—	RefObject<HTMLElement>Ref to the app container element that receives the push-back effect. Defaults to document.body.firstElementChild.
closeOnEsc	true	booleanClose modal on escape key press.
animateOnMount	true	booleanWhen false, a modal that mounts already open appears without its enter animation, as when a page load restores it. Opening it again later still animates.