Wishlist Dizzy

Toast

New

Overview

Stackable toast notifications with Phoenix flash fallback, titles, four severity levels, and automatic dismissal.

HEEx 
<div class="flex flex-wrap justify-center gap-2">
  <Button.button phx-click="show-toast" phx-value-kind="success">
    Show toast
  </Button.button>
  <Button.button phx-click="show-toast" phx-value-kind="warning" phx-value-title="Check this">
    Show titled toast
  </Button.button>
</div>

Individual toast

Topic published

Your topic is now visible to the community.

HEEx 
<Toast.toast
  id="toast-example-notification"
  kind={:success}
  title="Topic published"
  message="Your topic is now visible to the community."
  duration={0}
/>

Add this module

terminal 
mix dizzy.add toast

Add on_mount MyAppWeb.Ui.Toast to your web module’s live_view/0 quote, then replace the existing flash group in your application layout.

app layout 
<Toast.toast_group
  flash={@flash}
  toasts={assigns[:toasts] || []}
/>

Component API

Toast.toast_group

Attributes

Attributes for Toast.toast_group
NameTypeDefault Values
duration :integer 5000—
flash :map Required—
id :string "toast-group"—
toasts :list []—

Toast.toast

Attributes

Attributes for Toast.toast
NameTypeDefault Values
duration :integer Required—
id :string Required—
is_flash :boolean false—
kind :atom Required:info, :success, :warning, :error
message :string Required—
rest :global nil—
title :string nil—

JavaScript hook

.DizzyToastAutoDismiss

Starts the automatic dismissal timer and clicks the same dismissal control used manually. Phoenix JS commands handle enter and exit transitions, flash cleanup, and optimistic hiding.

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

Explore Dizzy