# modal (Flowbite v4 kit)

> Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and styles

## Props for `Modal`

| Name | Type | Description |
|------|------|-------------|
| `open` | `boolean` | Whether the modal is open on initial render. Defaults to `false` |
| `id` | `string` | Unique identifier used to generate internal Modal IDs |

## Blocks for `Modal`

- `content`: The modal structure, typically includes `Modal:Trigger` and `Modal:Content`

## Blocks for `Modal:Body`

- `content`: The main content area of the moda

## Blocks for `Modal:Close`

- `content`: The close trigger element (e.g., a `Button`) that closes the modal when clicked

## Props for `Modal:Content`

| Name | Type | Description |
|------|------|-------------|
| `showCloseButton` | `boolean` | Whether to display the close button in the top-right corner. Defaults to `true` |
| `backdrop` | `'dynamic'|'static'` | To prevent the modal from closing when clicking outside. Defaults to `dynamic` |

## Blocks for `Modal:Content`

- `content`: The modal content, typically includes `Modal:Header` and optionally `Modal:Footer`

## Blocks for `Modal:Footer`

- `content`: The footer area, typically contains action buttons

## Blocks for `Modal:Header`

- `content`: The header area, typically contains `Modal:Title` and `Modal:Description`

## Blocks for `Modal:Title`

- `content`: The title text of the modal

## Blocks for `Modal:Trigger`

- `content`: The trigger element (e.g., a `Button`) that opens the modal when clicked

## Dependencies

- symfony/ux-icons
- twig/extra-bundle
- twig/html-extra:^3.24.0
- tales-from-a-dev/twig-tailwind-extra:^1.0.0

- [View component](https://ux.symfony.com/toolkit/kits/flowbite-4/components/modal)