Toast notification system for LiveView applications.

Basic Setup

Add the flash group to your layout:

<PUI.Flash.flash_group flash={@flash} />

For LiveView pages with dynamic flashes:

<PUI.Flash.flash_group flash={@flash} live={true} />

Sending Flashes

From a LiveView:

PUI.Flash.send_flash("Operation completed successfully!")

With custom options:

PUI.Flash.send_flash(%PUI.Flash.Message{
  type: :success,
  message: "Saved!",
  duration: 8,
  class: "border-green-500"
})

Phoenix Preset Toasts

Flash keys commonly used by Phoenix (:success, :error, :info, :warning) are rendered as compact pill-shaped toasts with a type-colored icon. They are positioned at top-center by default, show a visible close button, and truncate to a single line.

{:noreply, put_flash(socket, :success, "Changes saved!")}
{:noreply, put_flash(socket, :error, "Could not save changes")}
{:noreply, put_flash(socket, :warning, "Session expires soon")}
{:noreply, put_flash(socket, :info, "New update available")}

You can also trigger the preset toast style through send_flash by setting one of those types:

PUI.Flash.send_flash(%PUI.Flash.Message{
  type: :success,
  message: "Connected!"
})

Positioning

Position the flash container in different corners:

<PUI.Flash.flash_group flash={@flash} position="top-right" />
<PUI.Flash.flash_group flash={@flash} position="top-center" />
<PUI.Flash.flash_group flash={@flash} position="bottom-left" />

Available positions: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right

Custom Content

Send HEEx content in flashes. When message is a HEEx template, the custom markup overrides the preset toast styling:

PUI.Flash.send_flash(%PUI.Flash.Message{
  type: :success,
  message: ~H|<div class="flex items-center gap-2">
    <.icon name="hero-check-circle" class="size-5" />
    <span>Success!</span>
  </div>|
})

Plain-string messages with a preset type still render as the compact built-in toast with a type-colored icon.

Updating Flashes

Update an existing flash by ID:

PUI.Flash.update_flash(%PUI.Flash.Message{
  id: "my-flash",
  message: "Updated!"
})

Configuration

Message Struct

Create flash messages with the Message struct:

%PUI.Flash.Message{
  message: "Hello!",           # Required
  type: nil,                    # :info, :success, :warning, :error, or nil
  preset: false,                # True for Phoenix preset toast styling
  duration: 5,                  # Seconds until auto-dismiss
  auto_dismiss: true,           # Auto-dismiss enabled
  dismissable: true,            # Allow manual dismiss
  show_close: true,             # Show close button
  class: ""                     # Additional CSS classes
}