Toaster

A message that provides feedback to users about an action or event, often temporary and dismissible. To dismiss the toast you can click the close button, on touch devices you can swipe the toast to dismiss it.

Under the hood, the toaster use this Livewire Toaster package, Zinc UI just provide the redesign component of that toaster.

From frontend

Toasts can be triggered directly from the frontend with Alpine.js, avoiding any server requests.

<x-button x-on:click="Toaster.success('Toast from frontend!')">Frontend</x-button>

From backend

Toasts can be triggered from the backend using the


    Toaster

facade. The toaster also persisted so the toast will be shown even after navigating to another page.

Open the browser's DevTools and navigate to the Network tab to view the backend response while click the button.

+use Masmerise\Toaster\Toaster; 
 use Livewire\Component;
  
 class YourComponent extends Component
 {
     public function toast(): void
     {
+        Toaster::success('Toast from backend!'); 
     }
 }

<x-button wire:click="toast">Backend</x-button>

Variants

The toaster component has 4 variants,


    success


    info


    warning

, and


    error

<x-button x-on:click="Toaster.success('Success toast!')">Success</x-button>
<x-button x-on:click="Toaster.info('Info toast!')">Info</x-button>
<x-button x-on:click="Toaster.warning('Warning toast!')">Warning</x-button>
<x-button x-on:click="Toaster.error('Error toast!')">Error</x-button>

Durations

Toaster has a default duration of

seconds, but it can be customized by passing the duration in milliseconds or change the default duration in the configuration file.

+use Masmerise\Toaster\Toaster; 
 use Livewire\Component;
  
 class YourComponent extends Component
 {
     public function toast3Seconds()
     {
+        Toaster::info('This toast will disappear in 3 seconds!'); 
     }
  
     public function toast6Seconds()
     {
+        Toaster::info('This toast will disappear in 6 seconds!') 
+            ->duration(6000); 
     }
  
     public function toast9Seconds()
     {
+        Toaster::info('This toast will disappear in 9 seconds!') 
+            ->duration(9000); 
     }
 }

<x-button wire:click="toast3Seconds">3s</x-button>
<x-button wire:click="toast6Seconds">6s</x-button>
<x-button wire:click="toast9Seconds">9s</x-button>

Configuration

The toast configuration can be customized in


    /config/toaster.php

. Here is the recommended configuration for the toaster.

 return [
     'accessibility' => true,
  
     'alignment' => 'bottom',
  
     'closeable' => true,
  
     'duration' => 3000,
  
     'position' => 'right',
  
-    'replace' => false, 
+    'replace' => true, 
  
-    'suppress' => false, 
+    'suppress' => true, 
  
     'translate' => true,
 ];

For more information about the toaster configuration, please refer to the Livewire Toaster documentation .