Temporary notification messages that auto-dismiss. Toasts are rendered client-side via JS hook — the server pushes events, no round-trips for display/dismiss.
Posiciones de Toast
Variantes de Toast
Toast con barra de progreso
Estándar
Relleno
Toasts persistentes (solo descarte manual)
These toasts stay visible until manually dismissed by clicking the close button (duration=0)
Toasts de acción
Toasts with action buttons push events back to the server. Toasts with actions are not click-to-dismiss.
Múltiples Toasts (apilados)
Toasts automatically stack vertically in the container
Tarea de larga duración (envío del servidor)
Patrón real
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.
Variantes de Toasts rellenos
Toasts de color del tema
Relleno
Cómo funciona
Arquitectura
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.
Servidor (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")
Plantilla
<.toast_container id="toasts" position="top-end" is_hook />