Powerful suite of Blade components for TALL Stack apps.

Toast

Toast component.

1. Insert the Toast component on your main layout.
<html>
<body>
<x-toast />
 
<!--... -->
</body>
</html>
2. Use the Interactions trait in your Livewire component.
use TallStackUi\Traits\Interactions;
 
class CreateUser extends Component
{
use Interactions;
 
// ...
}
3. Dispatch the Toast from a method.
public function save(): void
{
$this->toast()->success('...')->send();
$this->toast()->error('...')->send();
$this->toast()->warning('...')->send();
$this->toast()->info('...')->send();
}

This is an example. You can't dispatch all at the same time.

$this->toast()->success('Success', 'This is a success message.')->send();
$this->toast()->error('Error', 'This is an error message.')->send();
$this->toast()->warning('Warning', 'This is a warning message.')->send();
$this->toast()->info('Info', 'This is an info message.')->send();

Interacting with actions.

public function save(): void
{
$this->toast()
->question('Warning!', 'Are you sure?')
->confirm('Confirm', 'confirmed', 'Confirmed Successfully')
->cancel('Cancel', 'cancelled', 'Cancelled Successfully')
->send();
}
 
public function confirmed(string $message): void
{
$this->toast()->success('Success', $message)->send();
}
 
public function cancelled(string $message): void
{
$this->toast()->error('Cancelled', $message)->send();
}

As of version 1.10.0, the Toast has been improved to allow more flexibility in the format of use:

public function save(): void
{
// 1. The methods `confirm()` and `cancel()` are optional.
$this->toast()
->question('Warning!', 'Are you sure?')
->send();
 
// 2. You can set only `confirm()` or `cancel()`.
// Different than Dialog, only the defined button will be shown.
$this->toast()
->question('Warning!', 'Are you sure?')
->confirm('Confirm', 'confirmed', 'Confirmed Successfully')
->send();
 
// 3. You can make `confirm()` and `cancel()`
// as static buttons just by defining the text.
$this->toast()
->question('Warning!', 'Are you sure?')
->confirm('Confirm')
->cancel('Cancel')
->send();
 
// 4. You can set only the method and parameters
// to use the original text in the buttons.
$this->toast()
->question('Warning!', 'Are you sure?')
->confirm(method: 'confirmed', params: 'Confirmed Successfully')
->cancel(method: 'cancelled', params: 'Cancelled Successfully')
->send();
 
// 5. You can ask for a confirmation with other Toast types
$this->toast()
->success('Success!', 'Process completed successfully.')
->confirm('Undo', 'undo')
->cancel('Ok')
->send();
}

Increase the time to show the toast.

$this->toast()
->timeout(seconds: 10)
->success('Success', 'This is a success message.')
->send();

Starting from version 1.14.2, you can set a default timeout through configuration file:

// In config/tallstackui.php file
'toast' => [
// ...
'timeout' => 10,
],
 
// Then use the timeout() method without parameters
$this->toast()
->timeout()
->success('Success', 'This is a success message.')
->send();

An option to show minimized description texts.

$this->toast()
->expandable()
->success('Success', 'When the description has more than 30 characters, the toast can be optionally expandable.')
->send();

You can configure Toast to be extensible by default in the configuration file. When you do that, you can optionally ignore the expandable for specific Toast:

// ...
 
$this->toast()
->expandable(false)
->success('Success', 'This Toast will not be expandable.')
->send();

An option to listen to events.

<!-- The listeners receive the toast object through $event.detail -->
<div x-on:toast:accepted.window="alert($event.detail.description)"
x-on:toast:rejected.window="alert($event.detail.description)"
x-on:toast:timeout.window="alert($event.detail.description)">
...
</div>

We recommend that you use listeners in one place, whether in the base layout or once per component.

JavaScript API to interact with Toast.

<div>
<x-button color="green" onclick="show()">Success</x-button>
<x-button color="red" onclick="error()">Error</x-button>
<x-button color="yellow" onclick="warning()">Warning</x-button>
<x-button color="info" onclick="info()">Info</x-button>
<x-button color="secondary" onclick="confirm()">Confirmation</x-button>
 
<script>
show = () => $interaction('toast')
.success('Success', 'This is a success message.')
.send();
 
error = () => $interaction('toast')
.error('Success', 'This is a error message.')
.send();
 
warning = () => $interaction('toast')
.warning('Success', 'This is a warning message.')
.send();
 
info = () => $interaction('toast')
.info('Success', 'This is a info message.')
.send();
 
// To use confirmations the use and interact with methods of
// a Livewire component, it is necessary to pass the id of
// the component where the method is defined. You need to
// do this by interacting with the `wireable()` method.
 
const component = Livewire.find('your-component-id-goes-here').id;
 
confirm = () => $interaction('toast')
.wireable(component)
.question('Warning', 'Are you sure?')
.confirm('Confirm', 'confirmed', 'Confirmed Successfully')
.cancel('Cancel', 'cancelled', 'Cancelled Successfully')
.send();
 
// Alternatively, you can pass the component id as an
// empty string to use the FIRST LIVEWIRE COMPONENT OF THE PAGE.
 
confirm = () => $interaction('toast')
.wireable()
.question('Warning', 'Are you sure?')
.confirm('Confirm', 'confirmed', 'Confirmed Successfully')
.cancel('Cancel', 'cancelled', 'Cancelled Successfully')
.send();
</script>
</div>

Starting from version 1.5.3 you can customize Toast colors through deep personalization.

This component contains settings available in the configuration file. Click here to learn more.
Previous
Dialog

Code highlighting provided by Torchlight