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 dynamically-triggered flashes:

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

Sending Flashes

From a LiveView:

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

Override the layout position for an individual trigger:

PUI.Flash.send_flash("Copied!", position: "bottom-right")

The same position can be stored on a message when it will be updated later:

PUI.Flash.send_flash(%PUI.Flash.Message{
  type: :success,
  message: "Saved!",
  position: "top-right"
})

Phoenix Preset Toasts

Flash keys commonly used by Phoenix (:success, :error, :info, :warning) are rendered as constrained card toasts with a type-colored icon. Their messages wrap within the card while the icon and close button remain fixed. They use the group position unless a PUI.Flash.Message is sent directly.

{: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 and Stacking

Position the default flash group 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.

Multiple flashes remain expanded by default. Set stacked to true to collapse them into a stack that expands on hover or focus:

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

Collapsed stacks show at most three indicators behind the front message; additional messages remain available and appear when the stack expands.

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>|,
  position: "bottom-right"
})

Plain-string messages with a preset type still render as the built-in card 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!"
})

Timeout and Dismissal

Message.duration is measured in seconds and defaults to the group timeout. duration: -1 keeps a message open. auto_dismiss: false disables its timer. The group-level auto_dismiss value is measured in milliseconds:

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

Configuration

| auto_dismiss | integer | false | 5000 | Fallback auto-dismiss delay in milliseconds; false disables it | | show_close | boolean | true | Show close buttons |

Message Struct

Create flash messages with the Message struct:

%PUI.Flash.Message{
  message: "Hello!",           # Required
  type: nil,                    # :info, :success, :warning, :error, or nil
  position: nil,                # Uses the group position when nil
  preset: false,                # True for Phoenix preset toast styling
  duration: nil,                # Seconds; nil uses the group timeout
  auto_dismiss: true,           # Auto-dismiss enabled
  dismissable: true,            # Allow manual dismissal
  show_close: true,             # Show the close button when the group allows it
  class: ""                     # Additional CSS classes
}