A message that provides feedback to users about an action or event, often temporary and dismissible.
To use the Toast component from Livewire, you must include it somewhere on the page; often in your layout file:
If you are using wire:navigate to navigate between pages, you may want to persist the toast component so that toast messages don't suddenly disappear when navigating away from the page.
Once the toast component is present on the page, you can use the Flux::toast() method to trigger a toast message from your Livewire components:
You can also trigger a toast from Alpine directly using Flux's magic methods:
Or you can use the window.Flux global object to trigger a toast from any JavaScript in your application:
Both $flux and window.Flux support the following method parameter signatures:
By default, the toast will appear in the bottom right corner of the page. You can customize this position using the position prop.
By default, the toast will automatically dismiss after 5 seconds. You can customize this duration by passing a number of milliseconds to the duration prop.
Use a value of 0 as the duration prop to make the toast stay open indefinitely.