# `Noora.Modal`

Renders a modal component with customizable headers, content, and footers, supporting various header types, sizes, and event handling.

## Example

```elixir
<.modal id="user-profile-modal" title="Edit Profile" description="Update your personal information">
  <:trigger>
    <.button>Open Modal</.button>
  </:trigger>
  <:header_button>
    <.button on_click="save-profile">Save</.button>
  </:header_button>
  <form id="profile-form">
    <.input name="name" label="Name" />
    <.input name="email" label="Email" type="email" />
  </form>
  <:footer>
    <.modal_footer>
      <:action>
        <.button variant="ghost">Cancel</.button>
        <.button variant="primary">Save Changes</.button>
      </:action>
    </.modal_footer>
  </:footer>
</.modal>
```

# `modal`

## Attributes

* `id` (`:string`) (required) - The modal's unique identifier.
* `title` (`:string`) - Title of the modal. Defaults to `nil`.
* `description` (`:string`) - Description of the modal. Only visible when header_size is 'large'. Defaults to `nil`.
* `header_type` (`:string`) - Type of the header. Defaults to `"default"`. Must be one of `"default"`, `"icon"`, `"success"`, `"info"`, `"warning"`, or `"error"`.
* `header_size` (`:string`) - Size of the header. Defaults to `"large"`. Must be one of `"small"`, or `"large"`.
* `on_dismiss` (`:string`) - Event to emit when the dismiss icon is clicked. Defaults to `nil`.
* `on_open_change` (`:string`) - An optional event to fire when the modal is opened or closed. Defaults to `nil`.
* Global attributes are accepted. Additional HTML attributes.
## Slots

* `trigger` (required) - The modal's trigger. Should be a button that accepts the attributes provided by the slot.
* `header_icon` - Icon to be rendered in the header when type is 'icon'.
* `header_button`
* `footer` - The modal's footer element.
* `inner_block`

# `modal_footer`

## Attributes

* `type` (`:string`) - Type of the footer. Defaults to `"default"`. Must be one of `"default"`, or `"stretch"`.
## Slots

* `action` - Actions to be rendered in the footer.
* `inner_block`

---

*Consult [api-reference.md](api-reference.md) for complete listing*