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:
<body> <!-- ... --> <flux:toast /></body>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.
<body> <!-- ... --> @persist('toast') <flux:toast /> @endpersist</body>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:
<?phpuse Livewire\Component;use Flux;class EditPost extends Component{ public function save() { // ... Flux::toast('Your changes have been saved.'); }}You can also trigger a toast from Alpine directly using Flux's magic methods:
<button x-on:click="$flux.toast('Your changes have been saved.')"> Save changes</button>Or you can use the window.Flux global object to trigger a toast from any JavaScript in your application:
<script> let button = document.querySelector('...') button.addEventListener('alpine:init', () => { Flux.toast('Your changes have been saved.') })</script>Both $flux and window.Flux support the following method parameter signatures:
Flux.toast('Your changes have been saved.')// Or...Flux.toast({ heading: 'Changes saved', text: 'Your changes have been saved.', variant: 'success',})Use a heading to provide additional context for the toast.
Flux::toast( heading: 'Changes saved.', text: 'You can always update this in your settings.',);Use the variant prop to change the visual style of the toast.
Flux::toast(variant: 'success', ...);Flux::toast(variant: 'warning', ...);Flux::toast(variant: 'danger', ...);By default, the toast will appear in the bottom right corner of the page. You can customize this position using the position prop.
<flux:toast position="top right" /><!-- Customize top padding for things like navbars... --><flux:toast position="top right" class="pt-24" />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.
// 1 second...Flux::toast(duration: 1000, ...);Use a value of 0 as the duration prop to make the toast stay open indefinitely.
// Show indefinitely...Flux::toast(duration: 0, ...);