PetalComponents.Toast (petal_components v4.11.2)

Toasts with the modern interaction grammar: a collapsed stack that expands on hover, per-toast timeout progress, pause on hover, swipe to dismiss, and six positions - plus the LiveView-native parts nobody else has: server-pushed toasts, id-addressed updates (morph a loading toast into a success one), action buttons that push LiveView events, and an automatic put_flash bridge.

Setup

Render one group in your root layout (usually just before </body>):

<.toast_group flash={@flash} />

The PetalToast hook ships in the JS bundle (hooks: { ...PetalComponents }).

Sending toasts from LiveView

socket |> Toast.send_toast(:success, title: "Saved", description: "All changes stored.")

# a sticky loading toast, later morphed by id into a result
socket |> Toast.send_toast(:loading, id: "export", title: "Exporting...")
socket |> Toast.send_toast(:success, id: "export", title: "Export ready", duration: 4000)

# an action button that pushes an event back to your LiveView
socket
|> Toast.send_toast(:info,
  title: "Message archived",
  action: %{label: "Undo", event: "undo-archive", value: %{id: msg.id}}
)

put_flash bridge

Anything set with put_flash(:info, ...) / put_flash(:error, ...) renders as a toast automatically and the flash is cleared - controllers, redirects and old-school flows get modern toasts for free.

From plain JavaScript

window.dispatchEvent(new CustomEvent("petal:toast", {
  detail: {kind: "success", title: "Copied"}
}))

Summary

Functions

dismiss_toast(socket, id_or_all)

Dismisses a toast by id, or every toast with :all - the retraction half of the API. Useful when an async job is cancelled (dismiss the loading toast instead of morphing it) or on logout.

send_toast(socket, kind, opts \\ [])

Pushes a toast to the client. Returns the socket.

toast_group(assigns)

The toast mount point. Render once in your root layout.