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.
|
Prop
|
Description
|
|---|---|
| position |
Position of the toast on the screen. Options: bottom right (default), bottom left, top right, top left.
|
| duration |
Duration in milliseconds before the toast auto-dismisses. Use 0 for permanent toasts. Default: 5000.
|
| variant |
Visual style of the toast. Options: success, warning, danger.
|
The PHP method used to trigger toasts from Livewire components.
|
Parameter
|
Description
|
|---|---|
| heading |
Optional heading text for the toast.
|
| text |
Main content text of the toast.
|
| variant |
Visual style. Options: success, warning, danger.
|
| duration |
Duration in milliseconds. Use 0 for permanent toasts. Default: 5000.
|
The Alpine.js magic method used to trigger toasts from Alpine components. It can be used in two ways:
|
Parameter
|
Description
|
|---|---|
| message |
A string containing the toast message. When using this simple form, the message becomes the toast's text content.
|
| options |
Alternatively, an object containing:
- heading: Optional title text
- text: Main message text
- variant: Visual style (success, warning, danger)
- duration: Display time in milliseconds
|