Feedback

Toasts

Stacked notifications, bursts, actions and flash.

Stacked notifications via toast_group and LanternUI.send_toast/4. Fire one of each kind below.

Playground

Mount toast_group once, then send_toast from the LiveView.

<Toast.toast_group id="demo-toasts" />

<.button phx-click="demo_toast" phx-value-kind="info">Info</.button>
<.button phx-click="demo_toast" phx-value-kind="success">Success</.button>
<.button phx-click="demo_toast" phx-value-kind="warning">Warning</.button>
<.button phx-click="demo_toast" phx-value-kind="danger">Danger</.button>

Stack, actions, flash

Fire several to see the collapsed deck; hover or tab into it to fan out and pause timers.

<Toast.toast_group flash={@flash} max={3} />

LanternUI.send_toast(socket, :success, "Saved", action: %{label: "Undo", event: "undo"})
LanternUI.send_toast(socket, :info, "Sticky", duration: 0)

Placement

Any corner or edge-center. Pick one, then fire a toast — it enters from the nearest edge.

API reference

Props and slots, introspected from the component.

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the root element.
`flash`	`map`	`%{}`	Phoenix flash map; `:info` and `:error` render as toasts.
`id`	`string`	`"lantern-toasts"`	Stable DOM id for the toast stack hook.
`max`	`integer`	`3`	Maximum toast cards visible in the collapsed deck (1–10).
`placement`	`top-left \| top-center \| top-right \| bottom-left \| bottom-center \| bottom-right`	`"top-right"`	Corner or edge where the toast stack anchors.