Laravel Toast Notifications with Livewire: A Practical Guide

Toast notifications are the polite way to tell a user "that worked" without interrupting them. Done well, they appear in a corner, stack neatly, and disappear on their own. This guide shows how to add toast notifications to a Laravel app and fire them from Livewire actions — cleanly, with no JavaScript framework.

The pattern: emit, listen, render

The cleanest architecture for toasts has three parts:

1. A toast container rendered once in your layout.
2. An event your Livewire components dispatch when something happens.
3. A small piece of Alpine.js that listens and renders the toast, then auto-dismisses it.

Using a ready-made toast component

The Aura UI toasts component gives you the container and the listener. You render it once:

{{-- In your layout, once --}}
<x-aura::toasts position="top-right" />

Then, from any Livewire component, you dispatch a toast:

public function save(): void
{
    $this->validate();
    $this->record->save();

    $this->dispatch('toast',
        type: 'success',
        message: 'Your changes have been saved.',
    );
}

That is the whole flow. The component catches the browser event, shows a success toast in the top-right, and removes it after a few seconds. Error, warning and info variants work the same way — just change the type.

Why dispatch a browser event?

Dispatching a Livewire browser event (rather than rendering the toast inline) keeps the notification decoupled from the component that triggered it. Any component, anywhere on the page, can raise a toast through the same container. That is far cleaner than each component managing its own notification markup and timers.

Auto-dismiss and stacking

Two details separate a good toast system from a janky one: toasts should stack when several fire in quick succession, and each should auto-dismiss independently while remaining dismissible by hand. The Aura toasts component handles both, and respects reduced-motion preferences — part of being a WCAG-minded component set.

Get started

composer require bluestarsystem/aura-ui
php artisan aura:install

Add <x-aura::toasts /> to your layout, dispatch a toast event from your actions, and you have notifications that feel native. To see toasts alongside forms and tables in a complete UI, browse the free dashboard starter.