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' |