Modal

If true, the modal will be open.

Callback invoked to close the modal.

Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.

If true, the modal will autofocus the first enabled and interactive element within the ModalContent

If true, scrolling will be disabled on the body when the modal opens.

If true, the modal will close when the Esc key is pressed

If true, the modal will close when the overlay is clicked

Color Schemes for Modal are not implemented in the default theme. You can extend the theme to implement them.

The ref of element to receive focus when the modal closes.

The id of the modal

The ref of element to receive focus when the modal opens.

If true, the modal will be centered on screen.

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

The transition that should be used for the modal

Fires when all exiting nodes have completed animating out

Callback fired when the escape key is pressed and focus is within modal

Callback fired when the overlay is clicked.

Props to be forwarded to the portal component

If true, a `padding-right` will be applied to the body element that's equal to the width of the scrollbar. This can help prevent some unpleasant flickering effect and content adjustment when the modal opens

If true, the modal will return focus to the element that triggered it when it closes.

If false, focus lock will be disabled completely. This is useful in situations where you still need to interact with other surrounding elements. 🚨Warning: We don't recommend doing this because it hurts the accessibility of the modal, based on WAI-ARIA specifications.

A11y: If true, the siblings of the modal will have `aria-hidden` set to true so that screen readers can only see the modal. This is commonly known as making the other elements **inert**

Variants for Modal are not implemented in the default theme. You can extend the theme to implement them.