Coming from Orbiter, you should be aware of the following changes:
dismissable
has been renamedisDismissable
.onClose
has been removed, useonOpenChange
on the ModalTrigger instead.wrapperProps
has been renamedoverlayProps
.
Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content.
A Modal
uses the following components:
A modal must have an heading and a content.
A modal can have a side banner image. Make sure the image has no essential information as it could be cropped in mobile view. Images should not prevent a user from seeing the close button, be conscious of this.
A modal can offer a choice between 2 options. Keep the copy not too long in order to help the user quickly make his choice.
Use an header to provide additional information usually in the form of a link or a tooltip that provides more context to the task at hand. Links should open in a new window.
Use a footer to provide trivial information about content present in the modal, like a step : 1/3.
A modal can have a single button. Use a primary button to provide the main action.
Or a group of button. A maximum of 3 buttons are allowed in a modal, when necessary. The secondary and tertiary actions should be using a secondary variant.
By default, a modal will dismiss on outside interactions and esc keydown. However, in some cases, you might want to force the user to explicitly dismiss the modal with a targeted call to action.
This is what the isDismissable
and the isKeyboardDismissDisabled
prop is for.
You can set the isDismissable prop to false and isKeyboardDismissDisabled to true and render a call to action which will manually dismiss the popover by calling a close function.
The open state can be handled in controlled mode.
You don't have to use a ModalTrigger component if it doesn't fit your needs. A modal component can be used on it's own with any custom trigger.
A modal can be small, medium, large, extra-large, fullscreen or fullscreenTakeover. The default size is medium.
A modal can have different size in mobile and desktop view.
A CustomModal is a Modal with a custom layout. A CustomModal must contain a <Heading slot="title">
or have an aria-label or aria-labelledby attribute for accessibility.
Whether the Modal is dismissable.
@deprecated Use isDismissable
instead. This prop will be removed in a future version (September 30th, 2025).
Whether the Modal is dismissable.
Whether pressing the escape key to close the dialog should be disabled.
The size of the modal.
The props of the overlay
The inline style for the element.
Children of the dialog. A function may be provided to access a function to close the dialog.
The CSS className for the element.
Whether the overlay is open by default (controlled).
Whether the overlay is open by default (uncontrolled).
Handler that is called when the modal's open state changes.
This handler is only called when the modal is not used inside a ModalTrigger
. Use the onOpenChange
prop of ModalTrigger
instead if it's part of a trigger
A slot name for the component. Slots allow the component to receive props from a parent component.
An explicit null
value indicates that the local props completely override all props received from a parent.
The accessibility role for the dialog.
The element's unique identifier. See MDN.
Defines a string value that labels the current element.
Identifies the element (or elements) that labels the current element.
Identifies the element (or elements) that describes the object.
Identifies the element (or elements) that provide a detailed, extended description for the object.
Whether the overlay is open by default (controlled).
Whether the overlay is open by default (uncontrolled).
Handler that is called when the overlay's open state changes.
Whether the Modal is dismissable.
@deprecated Use isDismissable
instead. This prop will be removed in a future version (September 30th, 2025).
Whether the CustomModal is dismissable.
Whether pressing the escape key to close the dialog should be disabled.
The size of the CustomModal.
The props of the overlay
The inline style for the element.
Children of the dialog. A function may be provided to access a function to close the dialog.
The CSS className for the element.
Whether the overlay is open by default (controlled).
Whether the overlay is open by default (uncontrolled).
Handler that is called when the custom modal's open state changes.
This handler is only called when the modal is not used inside a ModalTrigger
. Use the onOpenChange
prop of ModalTrigger
instead if it's part of a trigger
A slot name for the component. Slots allow the component to receive props from a parent component.
An explicit null
value indicates that the local props completely override all props received from a parent.
The accessibility role for the dialog.
The element's unique identifier. See MDN.
Defines a string value that labels the current element.
Identifies the element (or elements) that labels the current element.
Identifies the element (or elements) that describes the object.
Identifies the element (or elements) that provide a detailed, extended description for the object.
Coming from Orbiter, you should be aware of the following changes:
dismissable
has been renamed isDismissable
.onClose
has been removed, use onOpenChange
on the ModalTrigger instead.wrapperProps
has been renamed overlayProps
.