Transient notifications, stacked in a corner of the viewport.
A port of the Pines toast.
Place one <.toast_group> in your root layout, then push toasts to it from anywhere:
<.toast_group position="top-right" />From a LiveView
push_event(socket, "pine:dispatch", %{
event: "pine:toast",
detail: %{title: "Saved", description: "Your changes are live.", type: "success"}
})Or use the helper, which builds the same payload:
{:noreply, PineUiPhoenix.Components.Toast.push(socket, "Saved", type: "success")}From the client
<.button x-on:click="$dispatch('pine:toast', {title: 'Copied'})">Copy</.button>The group listens on window, deliberately: toasts are global to the page, and a trigger
anywhere should reach the one group without knowing its id.
Summary
Feedback
Renders the toast container. Include this once, near the end of your root layout.
Renders a button that pushes a toast. Handy for demos and simple client-only cases.
Functions
Pushes a toast to the client from a LiveView.
Feedback
Renders the toast container. Include this once, near the end of your root layout.
Accessibility
The container is an aria-live region: polite for ordinary toasts so they do not
interrupt, and each error toast additionally carries role="alert" so failures are
announced promptly.
Hovering the stack pauses every dismissal timer, so a toast cannot vanish while it is being read.
Attributes
id(:string) - Defaults to"pine-toast-group".position(:string) - Defaults to"top-right". Must be one of"top-left","top-center","top-right","bottom-left","bottom-center", or"bottom-right".duration(:integer) - Default lifetime in ms.0means sticky. Defaults to5000.max(:integer) - Oldest toasts are dropped beyond this many. Defaults to5.class(:string) - Defaults tonil.- Global attributes are accepted.
Renders a button that pushes a toast. Handy for demos and simple client-only cases.
Attributes
label(:string) - Defaults to"Show toast".title(:string) (required)description(:string) - Defaults tonil.type(:string) - Defaults to"default". Must be one of"default","success","error", or"warning".duration(:integer) - Defaults tonil.class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block
Functions
@spec push(Phoenix.LiveView.Socket.t(), String.t(), keyword()) :: Phoenix.LiveView.Socket.t()
Pushes a toast to the client from a LiveView.
{:noreply, Toast.push(socket, "Saved", description: "Your changes are live.", type: "success")}Requires the PineBridge hook to be mounted (see the Installation guide).
Options
:description— secondary line:type—"default","success","error"or"warning":duration— lifetime in ms;0makes it sticky