Temporary notification messages that auto-dismiss. Toasts are rendered client-side via JS hook — the server pushes events, no round-trips for display/dismiss.
Toast Positions
Toast Variants
Toast with Progress Bar
Standard
Filled
Persistent Toasts (Manual Dismiss Only)
These toasts stay visible until manually dismissed by clicking the close button (duration=0)
Action Toasts
Toasts with action buttons push events back to the server. Toasts with actions are not click-to-dismiss.
Multiple Toasts (Stacking)
Toasts automatically stack vertically in the container
Long Running Task (Server Push)
Click the button to start a background task (3-8 seconds random). You'll get an info toast immediately, then a success toast when it completes — even if you navigate to another page and come back.
Filled Toast Variants
Theme Color Toasts
Filled
How It Works
Toasts use a push_event pattern — the server decides when to show a toast, the client JS hook handles rendering and auto-dismiss. No server round-trips for display or dismissal.
Server (LiveView)
# In your LiveView
socket |> PureToast.push_toast("success", "Saved!", "Changes saved.")
socket |> PureToast.push_toast("danger", "Error", "Failed.", duration: 0)
socket |> PureToast.push_toast("info", "Note", "FYI", position: "bottom-end")Template
<.toast_container id="toasts" position="top-end" is_hook />