Toast & Flash

PUI's Flash system provides a full-featured toast notification system with stacking, auto-dismiss, multiple positions, and LiveComponent support. It's built as an enhanced replacement for Phoenix's built-in flash messages.

Import

use PUI
# or
import PUI.Flash

Basic Usage

Add the flash_group component to your layout to enable flash messages:

<.flash_group flash={@flash} />

Sending Flash Messages

Send flash messages from your LiveView event handlers:

def handle_event("save", _params, socket) do
  PUI.Flash.send_flash("Changes saved successfully!")
  {:noreply, socket}
end

With Options

# Success message
PUI.Flash.send_flash(%PUI.Flash.Message{
  type: :info,
  message: "Item created!",
  icon: "hero-check-circle",
  duration: 3000
})

# Error message
PUI.Flash.send_flash(%PUI.Flash.Message{
  type: :error,
  message: "Failed to save",
  icon: "hero-exclamation-circle"
})

Positioning

Flash groups support six positions:

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

Auto-Dismiss

Control auto-dismiss timing (in milliseconds):

<!-- Dismiss after 3 seconds -->
<.flash_group flash={@flash} auto_dismiss={3000} />

<!-- Dismiss after 10 seconds -->
<.flash_group flash={@flash} auto_dismiss={10000} />

Message Limit

Limit the number of visible messages:

<.flash_group flash={@flash} limit={3} />

Live Component Mode

Enable LiveComponent mode for richer flash management:

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

Closeable

Control whether flash messages show a close button:

<.flash_group flash={@flash} show_close={false} />

API Reference

FlashGroup Attributes

Flash Attributes