Skip to content

Pro Component — This component requires an Aura UI Pro license.

Overview

The Toasts component provides a notification system for displaying temporary feedback messages. Toasts appear in a configurable screen position and automatically dismiss after a timeout. They support four types (success, error, warning, info) and can be triggered from Livewire components or Alpine.js via event dispatch.

Basic Usage

Place the component once in your layout:

<!-- In your layout file -->
<x-aura::toasts />

Then trigger toasts via buttons or Livewire actions:

<x-aura::button
    variant="primary"
    x-on:click="$dispatch('auratoast', { type: 'success', message: 'Record saved successfully.' })"
>
    Show Success Toast
</x-aura::button>

Trigger a toast from Livewire:

$this->dispatch('auratoast', type: 'success', message: 'Record saved successfully.');

Props

Prop Type Default Description
position string 'top-right' Screen position: top-right, top-left, bottom-right, bottom-left.

Toast Event Payload

Key Type Default Description
type string 'info' Toast type: success, error, warning, info.
message string '' The notification message text.
duration int 5000 Auto-dismiss time in milliseconds. Set to 0 for persistent toasts.

Examples

Layout Placement

<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html>
<body>
    {{ $slot }}

    <x-aura::toasts position="top-right" />
</body>
</html>

Triggering from Livewire Actions

// In a Livewire component
class CustomerManager extends Component
{
    public function save(): void
    {
        $this->validate();

        Customer::create($this->form);

        $this->dispatch('auratoast', type: 'success', message: 'Customer created successfully.');
        $this->reset('form');
    }

    public function delete(int $id): void
    {
        Customer::findOrFail($id)->delete();

        $this->dispatch('auratoast', type: 'success', message: 'Customer deleted.');
    }

    public function import(): void
    {
        try {
            $count = $this->processImport();
            $this->dispatch('auratoast', type: 'success', message: "{$count} records imported.");
        } catch (\Exception $e) {
            $this->dispatch('auratoast', type: 'error', message: 'Import failed: ' . $e->getMessage());
        }
    }
}

All Toast Types

<!-- Demonstration of all toast types -->
<div class="space-x-2">
    <x-aura::button
        variant="primary"
        x-on:click="$dispatch('auratoast', { type: 'success', message: 'Operation completed successfully.' })"
    >
        Success
    </x-aura::button>

    <x-aura::button
        variant="danger"
        x-on:click="$dispatch('auratoast', { type: 'error', message: 'Something went wrong. Please try again.' })"
    >
        Error
    </x-aura::button>

    <x-aura::button
        variant="warning"
        x-on:click="$dispatch('auratoast', { type: 'warning', message: 'Your session will expire in 5 minutes.' })"
    >
        Warning
    </x-aura::button>

    <x-aura::button
        variant="ghost"
        x-on:click="$dispatch('auratoast', { type: 'info', message: 'A new version is available.' })"
    >
        Info
    </x-aura::button>
</div>

Custom Duration

// Short toast (2 seconds)
$this->dispatch('auratoast', type: 'info', message: 'Copied to clipboard.', duration: 2000);

// Persistent toast (won't auto-dismiss)
$this->dispatch('auratoast', type: 'error', message: 'Connection lost. Retrying...', duration: 0);

Bottom-Left Position

To display toasts in the bottom-left corner, change the position prop. Only one <x-aura::toasts /> instance should exist per page.

<!-- Replace the default in your layout -->
<x-aura::toasts position="bottom-left" />

CRUD Operation Feedback Pattern

class OrderManager extends Component
{
    public function createOrder(): void
    {
        $order = Order::create([...]);
        $this->dispatch('auratoast', type: 'success', message: "Order #{$order->number} created.");
    }

    public function updateStatus(int $id, string $status): void
    {
        $order = Order::findOrFail($id);
        $order->update(['status' => $status]);
        $this->dispatch('auratoast', type: 'info', message: "Order #{$order->number} marked as {$status}.");
    }

    public function cancelOrder(int $id): void
    {
        $order = Order::findOrFail($id);

        if ($order->status === 'shipped') {
            $this->dispatch('auratoast', type: 'warning', message: 'Cannot cancel a shipped order.');
            return;
        }

        $order->update(['status' => 'cancelled']);
        $this->dispatch('auratoast', type: 'success', message: "Order #{$order->number} cancelled.");
    }
}

Slots

Slot Description
default Not used. Toasts are rendered dynamically from dispatched events.

Only one <x-aura::toasts /> instance is needed per page. It listens for toast events globally and stacks multiple notifications.

Accessibility

  • The toast container uses role="status" and aria-live="polite" for non-urgent messages.
  • Error toasts use aria-live="assertive" to immediately announce critical feedback.
  • Each toast has role="alert" for screen reader announcement.
  • A close button on each toast has aria-label="Dismiss notification".
  • Toasts do not steal focus from the user's current interaction.
  • The dismiss button is keyboard accessible via Tab and Enter.
  • Toast messages are concise to be effective as screen reader announcements.
  • Animations use prefers-reduced-motion: reduce to respect user preferences.