LiveToast

New

Overview

Installs LiveToast with its default presentation, programmatic notifications, streams, actions, and multiple containers.

HEEx

<div class="flex flex-wrap justify-center gap-2">
  <Button.button phx-click="show-live-toast" phx-value-kind="info">
    Show LiveToast
  </Button.button>
  <Button.button
    phx-click="show-live-toast"
    phx-value-kind="error"
    phx-value-title="Unable to save"
  >
    Show titled LiveToast
  </Button.button>
</div>

Add this module

terminal

mix dizzy.add live_toast

This command also adds the LiveToast dependency, Tailwind source, and LiveSocket hook. Replace the existing flash group in your application layout with the Dizzy wrapper.

app layout

<DizzyLiveToast.toast_group
  flash={@flash}
  connected={assigns[:socket] != nil}
  toasts_sync={assigns[:toasts_sync] || []}
/>

Component API

LiveToast.toast_group

Attributes

Attributes for LiveToast.toast_group
Name	Type	Default	Values
`client_error_delay`	`:integer`	3000	—
`connected`	`:boolean`	Required	—
`connection_notifications`	`:any`	%{}	—
`corner`	`:atom`	:bottom_right	:top_left, :top_center, :top_right, :bottom_left, :bottom_center, :bottom_right
`flash`	`:map`	Required	—
`flash_duration`	`:integer`	0	—
`id`	`:string`	"toast-group"	—
`kinds`	`:list`	[:info, :error]	—
`toast_component_fn`	`:any`	nil	—
`toasts_sync`	`:list`	[]	—

Slots

Slots for LiveToast.toast_group
Name	Required
`client_error`	Optional
`server_error`	Optional

JavaScript hook

LiveToast

Provided by the LiveToast package. It schedules, animates, and dismisses streamed notifications and coordinates client events with the LiveComponent. The Dizzy installer imports and registers it automatically.

mix dizzy.add includes the hook and performs any required asset setup automatically.