Modal

ReactProps

Props

API reference for Modal. For usage examples, see the React tab.

Modal.Root

Name	Type	Default
children* (required)	ReactNode	—
defaultOpen	boolean	—
Whether the overlay is open by default (uncontrolled).
isOpen	boolean	—
Whether the overlay is open by default (controlled).

Events (1)(1 prop)

Modal.CloseButton

Name	Type	Default
children	ChildrenOrFunction<ButtonRenderProps>	—
The children of the component. A function may be provided to alter the children based on component state.
fullWidth	boolean	false
Renders the Button in with a fluid width
isDisabled	boolean	—
Whether the button is disabled.
isPending	boolean	—
Whether the button is in a pending state. This disables press and hover events while retaining the ability to focus, and announces the pending state to screen readers.
size	"lg" | "md" | "sm"	md
Determines the size of the Button
variant	"destructive" | "primary" | "secondary" | "tertiary"	secondary
Variant for the button.

Accessibility (11)(11 props)

Advanced (12)(12 props)

Events (75)(75 props)

Forms (9)(9 props)

Styling (2)(2 props)

Modal.Content

Name	Type	Default
children	ReactNode	—
The content or child elements nested within this component.

Accessibility (2)(2 props)

Styling (2)(2 props)

Modal.Dialog

Name	Type	Default
children	ReactNode	—
The children of the component. A function may be provided to alter the children based on component state.
defaultOpen	boolean	—
Whether the overlay is open by default (uncontrolled).
fullscreen	boolean	—
isCloseButtonHidden	boolean	false
Removes the close button from Modal
isDismissable	boolean	false
Whether to close the modal when the user interacts outside it.
isEntering	boolean	—
Whether the modal is currently performing an entry animation.
isExiting	boolean	—
Whether the modal is currently performing an exit animation.
isKeyboardDismissDisabled	boolean	false
Whether pressing the escape key to close the modal should be disabled.
isOpen	boolean	—
Whether the overlay is open by default (controlled).
size	"lg" | "md" | "sm" | "xl"	—
UNSTABLE_deferUntilEntered	boolean	—
Whether to wait until the entry animation completes before hiding content outside the modal and moving focus into it.
UNSTABLE_overrideFocus	boolean	—
Whether to override the focus() method so it does not scroll the page. This is temporary and will be removed after fully testing all overlays.

Advanced (8)(8 props)

Events (67)(67 props)

Styling (2)(2 props)

Modal.Footer

Name	Type	Default
children	ReactNode	—
The content or child elements nested within this component.

Accessibility (2)(2 props)

Styling (2)(2 props)

Modal.Overlay

Name	Type	Default
children* (required)	ReactNode	—
defaultOpen	boolean	—
Whether the overlay is open by default (uncontrolled).
isDismissable	boolean	false
Enables the Modal to be closed by clicking outside of the Modal
isEntering	boolean	—
Whether the modal is currently performing an entry animation.
isExiting	boolean	—
Whether the modal is currently performing an exit animation.
isKeyboardDismissDisabled	boolean	false
Whether pressing the escape key to close the modal should be disabled.
isOpen	boolean	—
Whether the overlay is open by default (controlled).
UNSTABLE_deferUntilEntered	boolean	—
Whether to wait until the entry animation completes before hiding content outside the modal and moving focus into it.
UNSTABLE_overrideFocus	boolean	—
Whether to override the focus() method so it does not scroll the page. This is temporary and will be removed after fully testing all overlays.

Advanced (8)(8 props)

Events (67)(67 props)

Styling (2)(2 props)

Modal.Title

Name	Type	Default
children	ReactNode	—
The content or child elements nested within this component.
level	number	3
The heading level.

Accessibility (2)(2 props)

Styling (2)(2 props)