Toast
Toast component.
Toast, Personalization Blocks
Example:
TallStackUi::personalize() ->toast() ->block('block', 'classes');
-
Insert the
toast
component on your main layout:<html><body><x-toast /><!--... --></body></html> -
Use the
Interactions
trait in your Livewire component:use TallStackUi\Traits\Interactions;class CreateUser extends Component{use Interactions;// ...} -
Dispatch the Toast from a Livewire method:
public function save(): void{$this->toast()->success('...')->send();$this->toast()->error('...')->send();$this->toast()->warning('...')->send();$this->toast()->info('...')->send();}
$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();}
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();
// 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 not set an expiration time and also hide the progress bar.
$this->toast() ->persistent() ->success('Success', 'This is a persistent toast.') ->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.
<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.
public function save(): void{ $this->toast() ->success('...') ->hook([ // When close the toast by clicking on the "x" button. 'close' => [ 'method' => 'method', // The parameters can be anything you want: arrays, strings, int. 'params' => ['param1', 'param2'] ], // When the toast is automatically closed by the timeout. 'timeout' => [ 'method' => 'method', 'params' => ['param1', 'param2'] ], ]) ->send();}
Optionally, you can also set params
as closure:
public function save(): void{ $this->toast() ->success('...') ->hook([ 'close' => [ 'method' => 'method', 'params' => fn () => ['param1', 'param2'] ], 'timeout' => [ 'method' => 'method', 'params' => function () { return ['param1', 'param2']; } ], ]) ->send();}
The closure will be resolved using Laravel container and the result will be passed to the hook.
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>
The toast hooks are unavailable in the JavaScript API.
You can trigger a toast that will actually be displayed after a redirect action. Regardless of whether the redirection is to another Livewire component or to basic controllers, you can still display the toast.
use Illuminate\Contracts\View\View;use Livewire\Component;use TallStackUi\Traits\Interactions; class Payment extends Component{ use Interactions; public function render(): View { return view('livewire.livewire'); } public function save() { $this->toast() ->success('Done!', 'Your money has been sent!') ->flash() ->send(); return $this->redirect(route('dashboard')); }}
When using flash()
method, the toast will not be displayed in the current
request, but yes stored temporarily in the session and displayed in the next request.
You can trigger a toast via controllers.
use Illuminate\Http\Request;use TallStackUi\Traits\Interactions; class PaymentController extends Controller{ use Interactions; public function index() { return view('payment.index', [ // ]); } public function update(Request $request) { // ... $this->toast() ->success('...') ->send(); }}
Because certain methods were created and designed to be used with Livewire components,
methods like confirm
, cancel
and hooks
will be unavailable and will throw exceptions when you try to use them in controllers.