# `LineaUI.Components.Modal`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/modal.ex#L1)

LineOne's modal: a centered card over a dark backdrop, with LineOne's enter and leave animations.

    <.button phx-click={LineaUI.open("edit-pin")}>Edit</.button>

    <.modal id="edit-pin" animation="scale" origin="top">
      <:header>Edit Pin</:header>
      <p>Lorem ipsum dolor sit amet.</p>
      <:footer>
        <.button phx-click={LineaUI.close("edit-pin")}>Cancel</.button>
      </:footer>
    </.modal>

It opens and closes in the browser (`LineaUI.open/close/toggle("id")`), from the server
(`LineaUI.open(socket, "id")`) or from an assign:

    <.modal id="confirm" open={@confirming} on_close="cancel-confirm">…</.modal>

`on_close` runs however the modal closed (Esc, the backdrop, the close button, a command), so
the server can keep `@confirming` in sync. With an event name the LiveView (or `target`) gets
`handle_event("cancel-confirm", %{"id" => "confirm"}, socket)`; a `%JS{}` is run as is.
Without a `:header` the close × sits in the card's corner above the content; give wide content
(an image) a `close_variant="chip"` so the button keeps a backdrop.

`prevent_close` keeps Esc and the backdrop from closing it.

# `modal`

Renders a modal, closed unless `open`.

Events: `on_open` and `on_close` push `%{"id" => id}` when they are event names.

## Attributes

* `id` (`:string`) (required)
* `open` (`:boolean`) - The server's state; the browser can still open and close it. Defaults to `false`.
* `animation` (`:string`) - LineOne's transitions: the backdrop always fades, the card shifts, scales or slides up. Defaults to `"fade"`. Must be one of `"fade"`, `"scale"`, `"sheet"`, `"shift-down"`, or `"shift-up"`.
* `size` (`:string`) - The card's maximum width. Defaults to `"lg"`. Must be one of `"full"`, `"lg"`, `"md"`, `"sm"`, `"xl"`, or `"xs"`.
* `placement` (`:string`) - Defaults to `"center"`. Must be one of `"bottom"`, `"center"`, or `"top"`.
* `origin` (`:string`) - Where the `scale` animation grows from. Defaults to `"center"`. Must be one of `"bottom"`, `"center"`, or `"top"`.
* `blur` (`:boolean`) - Blurs the page behind the backdrop. Defaults to `false`.
* `prevent_close` (`:boolean`) - Esc and the backdrop do not close it. Defaults to `false`.
* `close_button` (`:boolean`) - The × in the header; without a header it sits in the card's corner. Defaults to `true`.
* `close_variant` (`:string`) - The corner × of a modal without a header: `plain` is a bare icon button, `chip` gives it a translucent backdrop so it stays legible over wide content such as an image. Defaults to `"plain"`. Must be one of `"plain"`, or `"chip"`.
* `on_open` (`:any`) - An event name or a `%JS{}`. Defaults to `nil`.
* `on_close` (`:any`) - An event name or a `%JS{}`. Defaults to `nil`.
* `target` (`:any`) - The `phx-target` of `on_open` / `on_close` events. Defaults to `nil`.
* `close_label` (`:string`) - Defaults to `"Close"`.
* `body_class` (`:any`) - Merged into the body under a `:header` (`px-4 py-4 sm:px-5` by default). Defaults to `nil`.
* `class` (`:any`) - Merged into the card. Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `header` - Accepts attributes:

  * `variant` (`:string`) - `bar` is LineOne's tinted title bar, `plain` the card title of the page. Must be one of `"bar"`, or `"plain"`.
  * `class` (`:any`)
* `inner_block` (required)
* `footer` - Accepts attributes:

  * `class` (`:any`)

---

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