# Modal A modal is an overlay element which blocks interaction with elements outside it. ## Sheet Overlays such as trays, drawers, and sheets can be built using a `Modal` with custom entry and exit animations. ```tsx import {DialogTrigger, Heading} from 'react-aria-components'; import {Sheet} from 'vanilla-starter/Sheet'; import {Button} from 'vanilla-starter/Button'; Notice

This is a modal with a custom modal overlay.

``` ## Controlled Use the `isOpen` prop to show a modal programmatically or mount in a different part of the JSX tree (e.g. outside a menu). ```tsx import {useState} from 'react'; import {Heading} from 'react-aria-components'; import {MenuButton, MenuItem} from 'vanilla-starter/Menu'; import {Modal} from 'vanilla-starter/Modal'; import {Dialog} from 'vanilla-starter/Dialog'; import {Button} from 'vanilla-starter/Button'; function Example() { let [isOpen, setOpen] = useState(false); return ( <> setOpen(true)}>Open dialog… ); } ``` ## Custom trigger `DialogTrigger` works with any pressable React Aria component (e.g. [Button](Button.html), [Link](Link.html), etc.). Use the `` component or [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html) hook to wrap a custom trigger element such as a third party component or DOM element. ```tsx "use client" import {Pressable, DialogTrigger, Heading} from 'react-aria-components'; import {Modal} from 'vanilla-starter/Modal'; import {Dialog} from 'vanilla-starter/Dialog'; import {Button} from 'vanilla-starter/Button'; {/*- begin highlight -*/} Custom trigger {/*- end highlight -*/} ``` Accessibility Any `` child must have an [interactive ARIA role](https://www.w3.org/TR/wai-aria-1.2/#widget_roles) or use an appropriate semantic HTML element so that screen readers can announce the trigger. Trigger components must forward their `ref` and spread all props to a DOM element. ```tsx const CustomTrigger = React.forwardRef((props, ref) => (