Toast

Usage

Place toast tag anywhere on the main layout.

<body>
...
<x-toast />
</body>

Import the Toast trait and call the $this->toast(...) method.

use Mary\Traits\Toast;
 
class MyComponent extends Component
{
// Use this trait
use Toast;
 
public function save()
{
// Do your stuff here ...
 
// Toast
$this->toast(
type: 'success',
title: 'It is done!',
description: null, // optional (text)
position: 'toast-top toast-end', // optional (daisyUI classes)
icon: 'o-information-circle', // Optional (any icon)
css: 'alert-info', // Optional (daisyUI classes)
timeout: 3000, // optional (ms)
redirectTo: null // optional (uri)
);
 
// Shortcuts
$this->success(...);
$this->error(...);
$this->warning(...);
$this->info(...);
}
}

For convenience this component flashes the following messages to make testing easier.

session()->flash('mary.toast.title', $title);
session()->flash('mary.toast.description', $description);

Example

The shortcuts are branded with default colors and icons.

<x-button label="Default" class="btn-success" wire:click="save" spinner />
 
<x-button label="Quick" class="btn-error" wire:click="save2" spinner />
 
<x-button label="Save and redirect" class="btn-warning" wire:click="save3" spinner />
public function save()
{
// Your stuff here ...
 
// Toast
$this->success('We are done, check it out');
}
 
public function save2()
{
// Your stuff here ...
 
// Toast
$this->error(
'It will last just 1 second ...',
timeout: 1000,
position: 'toast-bottom toast-start'
);
}
 
public function save3()
{
// Your stuff here ...
 
// Toast
$this->warning(
'It is working with redirect',
'You were redirected to another url ...',
redirectTo: '/docs/components/form'
);
}

Custom style

You can use any daisyUI/Tailwind classes. It also supports HTML.

<x-button label="Like" wire:click="save4" icon="o-heart" spinner />
public function save4()
{
// Your stuff here ...
 
// Toast
$this->warning(
'Wishlist <u>updated</u>',
'You will <strong>love it :)</strong>',
position: 'bottom-end',
icon: 'o-heart',
css: 'bg-pink-500 text-base-100'
);
}