# Modal

Import: `import { Modal } from '@neo4j-ndl/react'`

## Props

### Modal

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `children` | `ReactNode` | ✅ |  | Content to render inside the Modal. |
| `container` | `Element` |  |  | The container where the modal will be rendered. |
| `isOpen` | `boolean` | ✅ |  | Whether the Modal is open. |
| `onClose` | `((e: MouseEvent<HTMLElement, MouseEvent> \| KeyboardEvent<HTMLElement>, reason?: ModalCloseReason) => void)` |  |  | Callback function called when the modal is closed. |
| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
| `rootProps` | `HtmlAttributes<"div">` |  |  | Forwards the props to the modal container's wrapper - use with caution |
| `size` | `'large' \| 'medium' \| 'small' \| 'unset'` |  | `medium` | Sets the size(max-width) of the Modal, use 'unset' for custom sizing. |

Where `Element` is the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element.

Where `HtmlAttributes<"div">` is a type that includes all standard HTML div element attributes plus any custom data attributes (like data-testid or data-value) that follow the data-* pattern.

## Accessibility

## Implementation guidelines

The Modal component follows WAI-ARIA dialog pattern guidelines. Includes features such as focus trapping, keyboard navigation support, and proper ARIA roles for enhanced accessibility.