Layouts

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:

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:

With heading

Use a heading to provide additional context for the toast.

Variants

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

Positioning

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

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.

Permanent

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

Copyright © 2024 Wireable LLC ·Terms of Service
Built with by
Caleb Porzio and Hugo Sainte-Marie