AvenUI.Components.Toast (AvenUI v1.0.0)

Toast notification system for Phoenix LiveView.

Two usage patterns

1. Phoenix Flash (recommended for server events)

Use the flash_group/1 component to render Phoenix flash messages. Phoenix handles the lifecycle; AvenUI handles the visual presentation.

<%# In your root layout (root.html.heex) %>
<.flash_group flash={@flash} />

Send from LiveView:

socket |> put_flash(:info,    "Settings saved.")
socket |> put_flash(:success, "Deployment complete!")
socket |> put_flash(:warning, "Memory pressure detected.")
socket |> put_flash(:error,   "Connection failed.")

2. PubSub-pushed toasts (for background jobs, real-time events)

Use ToastLive embedded in your layout — subscribes to a PubSub topic and renders toasts as they arrive.

# In your app layout:
# <.live_component module={AvenUI.Components.ToastLive}
#   id="global-toasts"
#   topic="user:123"
# />
# Note: Replace "123" with your actual user ID dynamically

Send from anywhere:

AvenUI.Toast.push(user_id, :success, "Build #42 passed ✓")
AvenUI.Toast.push(user_id, :error,   "Deploy failed: timeout")

Standalone toast

<.toast variant="success" title="Saved!" phx-hook="Flash" id="t1">
  Your changes have been saved.
</.toast>

Summary

Functions

flash_banner(assigns)

Inline flash banner — full-width, used at the top of pages.

flash_group(assigns)

Flash group — renders all Phoenix flash messages in a fixed toast container. Place once in your root layout.

toast(assigns)

Renders a toast notification with title and optional dismiss button.

Functions

flash_banner(assigns)

Inline flash banner — full-width, used at the top of pages.

Example

<.flash_banner flash={@flash} />

Attributes

flash (:map) (required)
class (:string) - Defaults to nil.

flash_group(assigns)

Flash group — renders all Phoenix flash messages in a fixed toast container. Place once in your root layout.

Example

<%# lib/my_app_web/components/layouts/root.html.heex %>
<.flash_group flash={@flash} />

Attributes

flash (:map) (required) - The @flash map from the socket/conn.
class (:string) - Defaults to nil.

toast(assigns)

Renders a toast notification with title and optional dismiss button.

Attributes

id (:string) (required)
variant (:string) - Defaults to "info". Must be one of "info", "success", "warning", or "error".
title (:string) - Defaults to nil.
duration (:integer) - Auto-dismiss in ms (0 = no auto-dismiss). Defaults to 4000.
dismissible (:boolean) - Defaults to true.
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block