Toast

Notification toast component with progress bars, auto-dismiss, and multiple positions

Overview

The toast component provides a non-intrusive way to display notifications to users. Include the toast container once in your layout, then trigger toasts from anywhere in your application using PHP helper functions or JavaScript events.

Setup

Add the toast container to your layout file (usually in the base template):

<neura::toast />

Toast Types

The toast component supports four types: info, success, error, and warning. Each type has its own color scheme and icon.

// JavaScript
window.dispatchEvent(new CustomEvent('notify', {
    detail: {
        type: 'success',
        content: 'Operation completed successfully!',
        duration: 4000
    }
}));

// PHP (after redirect)
toast()->success('Operation completed successfully!');

PHP Helper Function

Use the toast() helper function in your controllers or Livewire components:

// Success toast
toast()->success('Operation completed successfully!');

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

// Warning toast
toast()->warning('Please check your input');

// Info toast
toast()->info('Here is some information');

// Custom duration (in milliseconds)
toast()->success('Saved!', 6000);

JavaScript Events

Dispatch a custom event from JavaScript to show a toast:

window.dispatchEvent(new CustomEvent('notify', {
    detail: {
        type: 'success',      // 'info', 'success', 'error', 'warning'
        content: 'Message text',
        duration: 4000,        // Duration in milliseconds (0 = persistent)
        showProgress: true     // Show progress bar (default: true)
    }
}));

Position

Control where toasts appear on the screen using the position prop:

Top Left

Top Right

Bottom Left

Bottom Right (Default)

<neura::toast position="top-left" />
<neura::toast position="top-right" />
<neura::toast position="bottom-left" />
<neura::toast position="bottom-right" />

Maximum Toasts

Limit the number of toasts displayed simultaneously:

<neura::toast maxToasts="3" />

Features

Auto-dismiss

Toasts automatically disappear after the specified duration (default: 4000ms). Set duration to 0 for persistent toasts.

Progress Bar

Visual progress indicator showing remaining time. Pauses when hovering over the toast.

Hover to Pause

Hovering over a toast pauses the countdown timer and progress bar.

Manual Dismiss

Users can manually close toasts by clicking the close button.

Best Practices

Do

Use appropriate toast types for different scenarios
Keep messages concise and clear
Use success toasts for completed actions
Use error toasts for failures that need user attention
Set reasonable durations (3000-5000ms for most cases)

Don't

Overuse toasts (don't show one for every action)
Use toasts for critical errors that require immediate action
Make messages too long (keep under 100 characters when possible)
Show too many toasts at once (use maxToasts to limit)

Properties

Property	Type	Default	Description
position	string	'bottom-right'	Toast position: 'top-left', 'top-right', 'bottom-left', or 'bottom-right'
maxToasts	int	5	Maximum number of toasts to display simultaneously
progressBarVariant	string	'full'	Progress bar style: 'full' or 'line'
progressBarAlignment	string	'bottom'	Progress bar position: 'top' or 'bottom'