Toast is a notification system for Phoenix LiveView that works as a drop-in replacement for your existing flash messages while providing rich, interactive toast notifications.
What is Toast?
Toast provides three ways to show notifications in your LiveView applications:
- Toast messages - Call
Toast.send_toast()from your LiveView to show rich, interactive notifications - Pipe operation - Use
Toast.put_toast()to pipe toast messages in your socket chain - Flash messages - Your existing
put_flash()calls continue to work, displayed in the same beautiful toast style
Key Features
Stackable toasts - Unlike traditional flash messages, display multiple toasts simultaneously with smooth stacking animations
Drop-in replacement - Your existing put_flash() calls automatically render as beautiful toasts with zero code changes
Beautiful by default - Inspired by Sonner’s elegant design philosophy, looks great out of the box
Framework agnostic styling - Ships with CSS that works with any CSS framework or custom styles, including full Tailwind v3 AND v4 compatibility
Highly customizable - Configure themes, positions, animations, icons, and action buttons
Server-controlled - Leverages the full power of LiveView with no client-side state management
Self-contained - CSS and JS included, no build step or npm dependencies required
Zero configuration - Works immediately with sensible defaults
Why Toast instead of live_toast?
While live_toast is an excellent library that served as inspiration alongside Sonner, Toast was created to address some specific needs:
- Full Tailwind v3 AND v4 compatibility - Works seamlessly with both current and future Tailwind versions
- Collapsed toast UI/UX - Provides better visual management when multiple toasts are active, with hover-to-expand functionality
- Enhanced stacking behavior - Improved animations and visual hierarchy for multiple simultaneous notifications
- Extended customization options - More granular control over styling, positioning, and behavior
Basic Usage
# In LiveView event handlers
def handle_event("save", _params, socket) do
{:noreply,
socket
|> assign(:saved, true)
|> Toast.put_toast(:success, "Changes saved!")}
end
# Send with custom options
Toast.send_toast(:success, "Upload complete!",
title: "Success!",
description: "Your file has been processed",
duration: 10_000,
action: %{
label: "View File",
event: "view_file",
params: %{id: 123}
}
)
# Your existing flash messages work unchanged
def handle_event("notify", _params, socket) do
{:noreply, put_flash(socket, :info, "Notification sent!")}
end
Toast Types
Toast includes 6 built-in types with appropriate icons and colors:
:info- Blue informational messages:success- Green success messages:error- Red error messages:warning- Yellow warning messages:loading- Loading state with spinner:default- Neutral style
Installation & Setup
Add to your mix.exs:
def deps do
[{:toast, "~> 0.1.0"}]
end
Import the JavaScript hook in your app.js:
// Note: The import path may vary depending on your project structure
// For assets in the root directory:
import Toast from "../deps/toast/assets/js/toast.js";
// For assets in nested folders (e.g., assets/js/app.js):
import Toast from "../../deps/toast/assets/js/toast.js";
// Add to your LiveSocket hooks
let liveSocket = new LiveSocket("/live", Socket, {
hooks: { Toast }
});
Import the CSS in your app.css:
/* Note: The import path may vary depending on your project structure */
/* For assets in the root directory: */
@import "../deps/toast/assets/css/toast.css";
/* For assets in nested folders (e.g., assets/css/app.css): */
@import "../../deps/toast/assets/css/toast.css";
Add the toast container to your root layout (root.html.heex):
<Toast.toast_group flash={@flash} />
Demo & Links
You can see Toast in action with interactive examples at the demo page, which showcases all the different toast types, stacking behavior, and customization options.
Hex Package: toast | Hex
Documentation: Toast — Toast v0.1.0
Demo: https://toast.dkenney.com/
Repository:
