Skip to main content
The Toast component requires a Flux Pro license. Learn more about Flux Pro.

​
Overview

The Toast component provides elegant, non-intrusive notifications that appear temporarily to inform users of actions, updates, or errors. They automatically dismiss after a set duration while allowing users to dismiss them manually if needed.

​
Basic Usage

Show a simple toast notification: 
<!-- Add toast container to your layout -->
<flux:toaster />

// In your Livewire component
public function save()
{
    // Save logic...
    
    $this->toast('Profile updated successfully!');
}

​
Toast Types

Show different notification types: 
// Success
$this->toast('Task completed!', 'success');

// Error
$this->toast('Something went wrong', 'error');

// Warning
$this->toast('Are you sure?', 'warning');

// Info
$this->toast('New message received', 'info');

​
With Title and Description

Show detailed notifications: 
$this->toast(
    title: 'Email sent',
    description: 'Your message was delivered to john@example.com',
    type: 'success'
);

​
Custom Duration

Control how long toasts stay visible: 
// Show for 5 seconds (default is 3)
$this->toast('This stays longer', duration: 5000);

// Show indefinitely (user must dismiss)
$this->toast('Important message', duration: null);

​
With Actions

Add action buttons to toasts: 
$this->toast(
    title: 'File deleted',
    description: 'Invoice.pdf was moved to trash',
    action: [
        'label' => 'Undo',
        'method' => 'undoDelete',
    ]
);

public function undoDelete()
{
    // Restore the file
    $this->toast('File restored', 'success');
}

​
Positioning

Control where toasts appear: 
<!-- Top right (default) -->
<flux:toaster position="top-right" />

<!-- Top center -->
<flux:toaster position="top-center" />

<!-- Bottom right -->
<flux:toaster position="bottom-right" />

<!-- Bottom center -->
<flux:toaster position="bottom-center" />

<!-- Bottom left -->
<flux:toaster position="bottom-left" />

​
Promise Toasts

Show loading, success, and error states: 
public function processPayment()
{
    $this->toastPromise(
        promise: fn() => $this->payment->process(),
        loading: 'Processing payment...',
        success: 'Payment successful!',
        error: 'Payment failed. Please try again.',
    );
}

​
Custom Styling

Customize toast appearance: 
$this->toast(
    title: 'Custom toast',
    description: 'With custom colors',
    type: 'success',
    class: 'bg-gradient-to-r from-green-400 to-blue-500',
);

​
Use Cases

Form Feedback

Confirm successful form submissions or show validation errors.

Background Tasks

Notify users when background processes complete.

Real-time Updates

Show notifications for new messages, mentions, or activity.

Undo Actions

Provide quick undo functionality for destructive actions.

​
Features

​
Notification Types

  • Success (green) - Confirm successful actions
  • Error (red) - Show errors and failures
  • Warning (yellow) - Display warnings and cautions
  • Info (blue) - Provide neutral information

​
Behavior

  • Auto-dismiss after duration
  • Manual dismiss with close button
  • Pause on hover
  • Queue multiple toasts
  • Stack limit to prevent overflow

​
Customization

  • Configurable position
  • Custom duration
  • Action buttons
  • Icons and images
  • Custom styling

​
Accessibility

  • ARIA live regions for screen readers
  • Keyboard dismissal (Escape key)
  • Focus management
  • Reduced motion support

​
Advanced Examples

​
File Upload Progress

public function uploadFile()
{
    $toastId = $this->toastLoading('Uploading file...');
    
    try {
        // Upload logic
        $this->file->store('uploads');
        
        $this->updateToast(
            id: $toastId,
            title: 'Upload complete',
            description: 'File uploaded successfully',
            type: 'success'
        );
    } catch (Exception $e) {
        $this->updateToast(
            id: $toastId,
            title: 'Upload failed',
            description: $e->getMessage(),
            type: 'error'
        );
    }
}

​
Multi-step Process

public function importData()
{
    $toastId = $this->toastLoading('Importing data...');
    
    $this->updateToast($toastId, title: 'Validating data...');
    $this->validate();
    
    $this->updateToast($toastId, title: 'Processing records...');
    $this->processRecords();
    
    $this->updateToast($toastId, title: 'Finalizing import...');
    $this->finalize();
    
    $this->updateToast(
        id: $toastId,
        title: 'Import complete',
        description: "Imported {$this->recordCount} records",
        type: 'success'
    );
}

​
Undo Destructive Action

public function deleteItem($id)
{
    $item = Item::find($id);
    $item->delete();
    
    $this->toast(
        title: 'Item deleted',
        description: "{$item->name} was deleted",
        type: 'success',
        duration: 5000,
        action: [
            'label' => 'Undo',
            'method' => 'restoreItem',
            'params' => [$id],
        ]
    );
}

public function restoreItem($id)
{
    Item::withTrashed()->find($id)->restore();
    $this->toast('Item restored', 'success');
}

​
Batch Operations

public function bulkDelete($ids)
{
    $count = count($ids);
    
    Item::whereIn('id', $ids)->delete();
    
    $this->toast(
        title: "Deleted {$count} items",
        description: 'Items were moved to trash',
        type: 'success',
        action: [
            'label' => 'Undo all',
            'method' => 'restoreMultiple',
            'params' => [$ids],
        ]
    );
}

​
Best Practices

​
Message Content

  • Keep messages concise and action-oriented
  • Use present tense (“Saved” not “Saving”)
  • Include specific details when helpful
  • Avoid technical jargon

​
Timing

  • Success messages: 3-4 seconds
  • Errors: 5-6 seconds or indefinite
  • Info: 4-5 seconds
  • Messages with actions: Longer or indefinite

​
Frequency

  • Don’t overwhelm users with too many toasts
  • Combine related notifications when possible
  • Limit stack to 3-4 visible toasts
  • Use a notification center for important persistent messages

​
Placement

  • Top-right for general notifications
  • Top-center for critical alerts
  • Bottom for less urgent updates
  • Consider user’s reading direction and UI layout

​
Integration with Livewire Events

// Emit from any component
$this->dispatch('toast', 
    title: 'Action completed',
    type: 'success'
);

// Listen in your layout
<flux:toaster wire:on="toast" />

​
Accessibility

Toasts are fully accessible:
  • ARIA live regions announce content to screen readers
  • Color is not the only indicator (icons included)
  • Keyboard dismissal support
  • Respects prefers-reduced-motion
  • Adequate color contrast ratios
For critical errors that require user action, consider using a modal dialog instead of a toast. Toasts work best for confirmations and non-critical updates.

Build docs developers (and LLMs) love

Get started for freeTalk to us