A single toast. Usually rendered by toaster/1, but can be placed anywhere.

Attributes

• id (:string) (required)
• title (:string) (required)
• description (:string) - Defaults to nil.
• color (:string) - Defaults to "neutral". Must be one of "neutral", "accent", "success", "warning", "danger", or "info".
• duration (:integer) - overrides the toaster default; 0 disables. Defaults to nil.
• closable (:boolean) - Defaults to true.
• icon (:boolean) - Defaults to true.
• on_dismiss (Phoenix.LiveView.JS) - run when dismissed by timer or the close button. Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["hidden"].

Renders the toast region. Put one in your app layout.

<.toaster flash={@flash} />

Flash messages render as toasts (:info and :error by default, plus any key listed in kinds). Toasts can also be pushed from the server without touching flash:

push_event(socket, "sl:toast", %{title: "Saved", color: "success", duration: 4000})

or raised from the client:

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

Toasts auto-dismiss after duration ms (pausing on hover and focus), or never when duration is 0. Escape dismisses the focused toast.

Attributes

• id (:string) - Defaults to "sl-toaster".
• flash (:map) - Defaults to %{}.
• position (:string) - Defaults to "bottom-end". Must be one of "bottom-end", "bottom-start", "bottom-center", "top-end", "top-start", or "top-center".
• duration (:integer) - default auto-dismiss in ms; 0 disables. Defaults to 5000.
• kinds (:list) - flash keys and the toast color for each. Defaults to [info: "info", error: "danger"].
• connection_toasts (:boolean) - show connection lost / server error toasts. Defaults to true.
• Global attributes are accepted.