Modal is a window that appears on top of the main content and allows the introduction of secondary flows while maintaining the original context.
Switch isOpen to true to view the modal.
- When important warnings require immediate attention.
- To prevent irreversible changes by creating friction.
- To fragment a complex workflow into simpler steps such as creating, editing, etc.
- Closing the Modal
- To close the modal using the built-in methods, the prop onRequestClose must be passed in. This prop should be the function that closes the modal. By providing this prop all three methods of closing the modal are enabled together: the close button, clicking outside the modal, and pressing the escape key. If you do not provide the onRequestClose prop, ensure that there is another way to close the modal, for example a cancel button.
In order to hide the rest of the application to screen-readers when the modal is open, make sure to use
Modal.setAppElement(el) where el is the root element of the app. This will set
aria-hidden=true when the modal is open.
When there is no visible label on the Modal (ie. title prop), you should use the ariaLabel prop to provide a modal label. The aria-labelledby attribute is automatically applied if the title prop is specified. If the modal requires additional description for screen-readers, use the ariaDescribedBy prop.
The Modal component has a width of "100%" and a customizable set maxWidth value. The Modal will force maxWidth to 100% when the screen is smaller than the small breakpoint (768px).
Controls whether the modal is open or closed.
The title appearing at the top of the modal.
Function that is run when the modal requests to be closed (esc key, clicking outside, clicking close), also renders the close button is passed in.
The content (usually buttons) to appear at the bottom of the modal.
Function that is run after the modal has opened.
Maximum width of the modal, modal will always compress responsively when the screen shrinks.
Move focus into the modal when it is rendered.
Move focus back to what triggered the modal after it closes.
String indicating how the modal content should be announced to screenreaders.
String indicating the aria description of the modal (optional for enhanced accessibility if needed).
className passed to the modal component.
className passed to the portal created for the modal component.
className passed to the overlay component.
Aria label on close button