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

LineOne's alerts: filled, outlined, soft and bordered, with an icon, an accent bar or a close
button.

    <.alert>This is simple alert</.alert>
    <.alert color="primary" variant="soft" shape="pill">Saved</.alert>
    <.alert color="secondary" variant="soft" accent="left">With a bar</.alert>
    <.alert color="info" variant="outline">
      <:icon boxed><svg>…</svg></:icon>
      This is simple alert
    </.alert>
    <.alert id="notice" color="info" variant="outline" dismissible>Closable</.alert>

`dismiss_alert/1` fades out and hides the alert around the element that runs it, for close
buttons placed by hand:

    <.button phx-click={dismiss_alert()}>Remind me later</.button>

# `alert`

Renders an alert.

With `accent` or a boxed `:icon` the alert is split into parts and its padding moves to the
content; otherwise the content sits in the padded alert itself, after an inline icon.

    <.alert id="saved" color="success" variant="soft" dismissible on_dismiss="hide_notice">
      <:icon><svg class="size-5">…</svg></:icon>
      Changes saved.
    </.alert>

With `on_dismiss="hide_notice"` the server gets `handle_event("hide_notice", %{"id" => "saved"}, socket)`.

## Attributes

* `id` (`:string`) - Defaults to `nil`.
* `color` (`:string`) - Defaults to `"neutral"`. Must be one of `"neutral"`, `"primary"`, `"secondary"`, `"info"`, `"success"`, `"warning"`, `"error"`, or `"dark"`.
* `variant` (`:string`) - Defaults to `"solid"`. Must be one of `"solid"`, `"outline"`, `"soft"`, or `"bordered"`.
* `shape` (`:string`) - Defaults to `"rounded"`. Must be one of `"rounded"`, or `"pill"`.
* `accent` (`:string`) - A colored bar on one side of the alert. Defaults to `nil`. Must be one of `nil`, `"left"`, or `"right"`.
* `dismissible` (`:boolean`) - Adds LineOne's close button, which fades the alert out. Defaults to `false`.
* `on_dismiss` (`:any`) - An event name or a `JS` command run when the close button is pressed. The event's payload is `%{"id" => id}`. Defaults to `nil`.
* `target` (`:any`) - The `phx-target` of `on_dismiss`. Defaults to `nil`.
* `open` (`:boolean`) - `false` renders the alert hidden; the close button hides it in the browser. Defaults to `true`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `icon` - An icon before the content. Accepts attributes:

  * `boxed` (`:boolean`) - Draws the icon on a filled block at the edge of the alert.
* `action` - Controls after the content, such as a menu or a button.
* `inner_block` (required)

# `dismiss_alert`

```elixir
@spec dismiss_alert(Phoenix.LiveView.JS.t()) :: Phoenix.LiveView.JS.t()
```

Fades out and hides the alert that holds the element running it, the way LineOne removes a
dismissed alert.

    <button phx-click={dismiss_alert()}>Close</button>

---

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