# Modal

Ein Modal zeigt Inhalte zentriert als Overlay über der Hauptseite an, wodurch der Nutzer sich voll auf den Inhalt des Modals konzentrieren kann.

## Develop

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `"s" \| "m" \| "l"` | `"s"` | The size of the modal. |
| `offCanvas` | `boolean` | - | Whether the modal should be displayed as an off canvas. |
| `offCanvasOrientation` | `"left" \| "right"` | `"right"` | Whether the off canvas should be displayed on the right or left side of the screen. |
| `controller` | `OverlayController` | - | An overlay controller to control the modal state. |
| `slot` | `string` | - | Accepts "actionConfirm" to use the modal as a confirmation modal for an action. |
| `isDismissable` | `boolean` | - | Whether the modal can be closed by clicking outside of it. |
| `showCloseButton` | `boolean` | - | Whether the close button should be visible |
| `children` | `ReactNode` | - | - |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | - |
| `ref` | `Ref<HTMLSpanElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see [React Docs](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) |
| `key` | `Key` | - | - |
| `className` | `string` | - | The elements class name. |
| `isOpen` | `boolean` | - | - |
| `isDefaultOpen` | `boolean` | - | - |

### Events

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `onOpenChange` | `OverlayOpenStateHandler` | - | - |
| `onClose` | `OverlayCloseHandler` | - | - |
| `onOpen` | `OverlayOpenHandler` | - | - |