Maskowlabs Logo Maskowlabs

Toasts

Display toasts by using the Toast facade within a Livewire component. 

 1use MaskowLabs\BasicComponents\Facades\Toast;
 2 
 3class InviteUser extends \Livewire\Component {
 4 
 5    public function save(){
 6        // ...
 7        Toast::success($this, 'User invited', 'The user has been successfully invited.');
 8    }
 9 
10}

Types

Toasts can have different types. The default type is info. You can change the type by using primary, warning, danger or success. 

1Toast::info($this, 'New Order #123456', 'A new order has been placed. Please check the order details.');
2Toast::primary($this, 'New Feature Available', 'You can now use the new feature. Enjoy!');
3Toast::warning($this, 'Load balance warning', 'The server is currently under heavy load. Please try again later.');
4Toast::danger($this, 'Permission denied', 'You do not have the permission to perform this action.');
5Toast::error($this, 'Could not save the file', 'The file is too large. Please try again with a smaller file.');
6Toast::success($this, 'File uploaded', 'The file has been successfully uploaded.');

Title Only

You can also display a toast with only a title. This is useful for short messages or notifications. 

1Toast::info($this, 'New Order #123456');
2Toast::primary($this, 'New Feature Available');
3Toast::warning($this, 'Load balance warning');
4Toast::danger($this, 'Permission denied');
5Toast::error($this, 'Could not save the file');
6Toast::success($this, 'File uploaded');

Duration

The default duration of a toast is 7500 milliseconds. You can change the duration by passing a second parameter to the Toast facade. 

1Toast::primary(
2    component: $this,
3    title: 'New Order #123456',
4    message: 'A new order has been placed. Please check the order details.',
5    duration: 1000
6);
7 
8// Toast::primary($this, 'New Order #123456', 'A new order has been placed. Please check the order details.', 1000);

Permanent

You can display a permanent toast by setting the duration to 0. 

1Toast::primary(
2    component: $this,
3    title: 'New Order #123456',
4    message: 'A new order has been placed. Please check the order details.',
5    duration: 0
6);

Persistent & Position

If you want to archive a Single-Page-Application like feeling, you can add the livewire-toast component to your main Livewire layout. This will keep the toasts persistent, even if you navigate to another page.

To change the placement of the toast, you can add the position attribute to the livewire-toast component.

Available positions are: top-center, bottom-center, top-full-width, bottom-full-width, top-left, top-right, bottom-right, bottom-left. 

 1<html>
 2<body>
 3    <!-- .... -->
 4 
 5    @persist('toast')
 6        <livewire-toast />
 7        {{--
 8            <livewire-toast position="top-center" />
 9        --}}
10    @endpersist
11</body>
12</html>

JavaScript

You can also display toasts by using the window.toast JavaScript object. This is useful if you want to display a toast from a non-Livewire context. 

 1<x-button x-on:click="toast.primary('Example Alert', 'This is an example')">Simple Toast</x-button>
 2 
 3<script>
 4/**
 5    Usage:
 6    toast.info(title, message, { duration: 7500, position: 'top-center' });
 7 
 8    Types:
 9    toast.info('...');
10    toast.primary('...');
11    toast.success('...');
12    toast.warning('...');
13    toast.danger('...');
14    toast.error('...');
15**/
16</script>