Flux Pro component
This component is only available in the Pro version of Flux.

Toast

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:

Copy to clipboard

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.

Copy to clipboard

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:

Copy to clipboard

You can also trigger a toast from Alpine directly using Flux's magic methods:

Copy to clipboard

Or you can use the window.Flux global object to trigger a toast from any JavaScript in your application:

Copy to clipboard

Both $flux and window.Flux support the following method parameter signatures:

Copy to clipboard

With heading

Use a heading to provide additional context for the toast.

Copy to clipboard

Variants

Use the variant prop to change the visual style of the toast.

Copy to clipboard

Positioning

By default, the toast will appear in the bottom right corner of the page. You can customize this position using the position prop.

Copy to clipboard

Duration

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.

Copy to clipboard

Permanent

Use a value of 0 as the duration prop to make the toast stay open indefinitely.

Copy to clipboard

Reference

flux:toast

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.

Flux::toast()

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.

$flux.toast()

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
Copyright © 2025 Wireable LLC ·Terms of Service
Built with by
Caleb Porzio and Hugo Sainte-Marie