An accessible overlay dialog
To remove the header, set withCloseButton={false} :
You can change the modal width by setting the size prop to a predefined size or any valid width, for example, 55% or 50rem . The Modal width cannot exceed 100vw .
Modal with size="auto" will have width that fits its content:
A fullscreen modal will take the entire screen. It is usually better to change the transition to fade when the fullScreen prop is set:
To switch Modal to fullscreen on devices with small screens only, use the use-media-query hook. The size prop is ignored if the fullScreen prop is set:
Modal uses the Overlay component. You can set any props that Overlay supports with overlayProps :
Use xOffset / yOffset to configure the horizontal/vertical content offsets:
Modal is built with the Transition component. Use the transitionProps prop to customize any Transition properties:
The onExitTransitionEnd and onEnterTransitionEnd props can be used to run code after the exit/enter transition is finished. For example, this is useful when you want to clear data after the modal is closed:
Modal uses FocusTrap to trap focus. Add the data-autofocus attribute to the element that should receive initial focus.
If you do not want to focus any elements when the modal is opened, use the FocusTrap.InitialFocus component to create a visually hidden element that will receive initial focus:
If you do not add the data-autofocus attribute and do not use FocusTrap.InitialFocus , the modal will focus the first focusable element inside it, which is usually the close button.
The following props can be used to control Modal behavior. In most cases, it is not recommended to turn these features off – it will make the component less accessible.
Modal uses the react-remove-scroll package to lock scroll. You can pass props down to the RemoveScroll component with removeScrollProps :
Use closeButtonProps to customize the close button:
You can use the following compound components to have full control over the Modal rendering:
Use the Modal.Stack component to render multiple modals at the same time. Modal.Stack keeps track of opened modals, manages z-index values, focus trapping, and closeOnEscape behavior. Modal.Stack is designed to be used with the useModalsStack hook.
Differences from using multiple Modal components:
Note that Modal.Stack can only be used with the Modal component. Components built with Modal.Root and other compound components are not compatible with Modal.Stack .
The useModalsStack hook provides an easy way to control multiple modals at the same time. It accepts an array of unique modal IDs and returns an object with the following properties:
Example of using useModalsStack with the Modal component:
The Modal component uses the react-remove-scroll package to lock scroll. To properly size these elements, add a className to them ( documentation ):
The Modal component follows WAI-ARIA recommendations on accessibility.
Set the title prop to make the component accessible, which will add aria-labelledby to the content element:
To set the close button's aria-label , use closeButtonProps :