The Changelog
What's new around here?
Succinct and informative updates about Flux.
October 14, 2024
Toasts just got better
Version ^1.0.10
Flux's Toast component just got a heap of improvements based on a mixture of your feedback and our intuition.
Making them stand-out
First, we increased the drop-shadow to make Toasts appear as if they are in the foreground of the page.
We also increased the slide-up animation duration so that the motion of the Toast more easily catches the user's eye.
Adding variants
You can now add additional context to your Toast messages using one of three new variants: success, danger, and warning.
Variants can be used by passing the
variant
parameter to Flux::toast()
like so:
Copy to clipboard
Positioning
You can now specify where on the page you want your toasts to appear by passing the
position
prop to <flux:toast />
:
Copy to clipboard
If you have a header navbar at the top of your app, you may want to add extra padding using Tailwind:
Copy to clipboard
Flux automatically adjusts animations based on position. Toasts positioned at the top will slide-in from the side, while Toasts on the bottom will slide up from the bottom.
Persisting toasts between redirects
A common pattern in applications is to trigger a toast before redirecting your users elsewhere:
Copy to clipboard
If you wish to preserve your toasts between page visits, you can do so using the
@persist
Blade directive in your layout:
Copy to clipboard
Now, If you trigger a toast before a redirect, it will remain on the page after the redirect.
This behavior was previously broken because of the way Browsers handle popovers between pages, however we introduced a patch in Livewire version 3.5.10 to allow for this.