Toast - Server-rendered toast notifications for Phoenix LiveView

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.2.0
Demo: https://toast.dkenney.com/

Repository:

https://github.com/dmkenney/toast