PureAdmin.Components.Toast (PureAdmin v1.1.0)

Toast notification components for Pure Admin.

Provides toast/1 for server-rendered toasts, toast_container/1 for positioning, and push_toast/3 for triggering client-side toasts via push_event.

Client-side toasts (recommended)

Add a hook-enabled container in your layout:

<.toast_container id="toasts" position="top-end" is_hook />

Then push toasts from any LiveView:

socket |> push_toast("success", "Saved!", "Your changes have been saved.")

The JS hook handles rendering and auto-dismiss — no server round-trips.

Summary

Functions

push_toast(socket, variant, title, message, opts \\ [])

Pushes a toast notification to the client via push_event.

toast(assigns)

Renders a toast notification.

toast_container(assigns)

Renders a toast container for positioning toasts in the viewport.

Functions

push_toast(socket, variant, title, message, opts \\ [])

Pushes a toast notification to the client via push_event.

The client-side PureAdminToast hook renders and auto-dismisses the toast.

Options

:duration — auto-dismiss in ms (default: 5000, 0 = persistent)
:position — override container position (default: "top-end")

Examples

socket |> push_toast("success", "Saved!", "Changes saved successfully.")
socket |> push_toast("danger", "Error", "Something went wrong.", duration: 0)
socket |> push_toast("info", "Note", "FYI", position: "bottom-end")

toast(assigns)

Renders a toast notification.

Examples

<.toast variant="success" title_text="Success!" message_text="Changes saved." />

<.toast variant="danger" title_text="Error" message_text="Save failed." on_close="dismiss_toast" />

Attributes

id (:string) - Defaults to nil.
variant (:string) - Defaults to "info". Must be one of "primary", "success", "danger", "warning", or "info".
theme_color (:string) - Theme color slot 1-9 (overrides variant). Defaults to nil. Must be one of nil, "1", "2", "3", "4", "5", "6", "7", "8", or "9".
is_filled (:boolean) - Filled style with full-color background and contrast text. Defaults to false.
title_text (:string) - Toast title. Defaults to nil.
message_text (:string) - Toast message. Defaults to nil.
is_visible (:boolean) - Show/hide the toast. Defaults to true.
on_close (:string) - LiveView event fired on close. Defaults to nil.
class (:string) - Defaults to nil.
Global attributes are accepted. Supports all globals plus: ["phx-click", "phx-value-id"].

Slots

icon - Custom icon content.
inner_block - Custom body content (overrides title_text/message_text).

toast_container(assigns)

Renders a toast container for positioning toasts in the viewport.

Positions

top-end, top-center, top-start, bottom-end, bottom-center, bottom-start

Examples

<.toast_container position="top-end">
  <.toast :for={t <- @toasts} id={t.id} variant={t.variant} title_text={t.title} message_text={t.message} on_close="dismiss_toast" />
</.toast_container>

Attributes

id (:string) - Required when using phx-hook. Defaults to nil.
position (:string) - Defaults to "top-end". Must be one of "top-end", "top-center", "top-start", "bottom-end", "bottom-center", or "bottom-start".
is_hook (:boolean) - Use PureAdminToast JS hook for client-side toast management via push_event. Defaults to false.
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block