Neura UI

Loading…

Logo
Neura UI
All pages 99

Toast

A stack of notices. New ones rise in front, older ones peek behind, and a right swipe dismisses the front one.

Overview

Include one toast in the layout, then call it from PHP or from a notify event. New toasts sit in front. Older ones tuck behind in 14px peeks and fan open on hover or focus. A right swipe dismisses the front toast. Alt+T moves focus into the stack, and Escape dismisses the focused toast. Every stack on the page hears the same event.

Setup

Add the toast container to your layout file (usually in the base template):
Blade 
<neura::toast />

Toast Types

The toast component supports four types: info, success, error, and warning. Each type has its own color scheme and icon.
blade 
// 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:
Blade 
// 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:
Blade 
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:
blade

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:
blade 
<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

A thin timer along the bottom edge. It pauses while the stack is hovered, focused, dragged, or the tab is hidden.

Hover to Pause

Hovering or focusing the stack fans the toasts open and pauses their timers. A right swipe throws the front toast away. A left drag rubber-bands back.

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 How many toasts the stack keeps. Three stay visible; the rest peek until hover.