The Changelog
What's new around here?
Succinct and informative updates about Flux.
August 21, 2025
Stacked toasts
Version ^2.2.5
You've asked, we've listened. Flux toasts can now stack! When multiple notifications appear at once, they'll overlap intelligently, expanding on hover to reveal each message—giving your users a more organized notification experience.
Let's take a look.
Getting started
The new flux:toast.group component wraps your regular toast component to enable stacking. Just wrap your toast component in a group:
Copy to clipboard
<flux:toast.group> <flux:toast /></flux:toast.group>That's it! Your toasts will now automatically stack when multiple notifications appear. The default behavior shows them slightly overlapped, creating a clean visual hierarchy that doesn't overwhelm the screen.
Hover to expand
When you hover over a stack of toasts, they'll expand to show each notification in full. Even better, the dismissal timer pauses while the stack is expanded, so your messages won't disappear while users are reading them.
This ensures users can quickly scan multiple notifications without the stress of them vanishing mid-read. Once you move your cursor away, the stack collapses back to its compact state and the timers resume.
Always expanded
Sometimes you want all your toasts visible at once—no hovering required. For those cases, we've added the expanded prop:
Copy to clipboard
<flux:toast.group expanded> <flux:toast /></flux:toast.group>With expanded set to true, your toast stack will always show each notification in full, perfect for applications where users need to see all messages immediately.
Position control
Just like individual toasts, the group component respects positioning. Want your stack in the top corner? No problem:
Copy to clipboard
<flux:toast.group position="top end"> <flux:toast /></flux:toast.group>The group handles all the positioning logic, ensuring your toasts animate correctly whether they're sliding up from the bottom or sliding in from the top.
Bon Appétit
The stacking animation is smooth and natural. The hover interaction feels responsive. The spacing between toasts is just right. And of course, it all works seamlessly with the existing toast API—no changes needed to your Flux::toast() calls.
Enjoy!
June 16, 2025
Popovers
Version ^2.2.0
Meet the new Popover component. It's a dropdown, but instead of the "menu" part, it's a generic <div> that you can do whatever you want with.
They're great for things like custom filters and hover cards.
Copy to clipboard
<flux:dropdown> <flux:button>...</flux:button> <flux:popover> <!-- Put whatever you want in here... --> </flux:popover></flux:dropdown>Hover to reveal
Want to show additional information when users hover over elements? Just add the hover prop and you're set. This is perfect for user profile previews, interactive tooltips, or any contextual information you want to reveal on hover.
All. The. Details.
As with every other component in Flux, we left no stone unturned and sweated every detail for this popver.
Programmatic control: Bind the open/closed state to a Livewire property for complete control over when the popover shows and hides.
Copy to clipboard
<flux:dropdown wire:model="showProfile"> <flux:button>Profile</flux:button> <flux:popover>...</flux:popover></flux:dropdown>Accessibility by default: ARIA attributes like aria-expanded are automatically managed for you. Screen readers get all the context they need about the popover's state and relationship to its trigger.
Native browser behavior: Because we use the native popover attribute under the hood, you get all the goodness that comes with it—Escape to close, Enter to open, proper tab order, and the popover will automatically close when you tab away from it.
Anchor positioning: The popover intelligently positions itself next to the trigger element. You can fine-tune everything with offset, gap, position, and align props.
Smart edge detection: If the popover would open too close to the bottom of the screen, it flips to show above instead; same for left/right edges.
Overflow handling: When there's not enough room to show the full popover content, it becomes scrollable automatically so nothing gets cut off. Your users can always access everything inside.
All of this complexity is completely hidden from you as the developer. Just drop in the component and it works beautifully everywhere.
Check out the Popover documentation for more examples and detailed API reference.
June 16, 2025
Pills & button selectors
Version ^2.2.0
We've added two new variants to the radio and checkbox components: pills and buttons.
These variants work with both radio groups and checkbox groups, giving you compact alternatives that fit perfectly in filters, toolbars, and anywhere you want a more streamlined look.
Pills
Pills are compact, rounded buttons that look like…well…pills! They're perfect for laying out selectable options in a way that doesn't dominate the UI.
Copy to clipboard
<flux:checkbox.group variant="pills" label="Categories"> <flux:checkbox value="fantasy" label="Fantasy" /> <flux:checkbox value="science-fiction" label="Science fiction" /> <flux:checkbox value="horror" label="Horror" /> <!-- ... --></flux:checkbox.group>Of course, pills work just as well with the radio.group component if you only want them to be single-select.
Selectable buttons
The buttons variant gives you toolbar-style options that look more prominent and actionable. Perfect for feature toggles and grouped controls:
Copy to clipboard
<flux:radio.group variant="buttons" label="Feedback type"> <flux:radio icon="bug-ant">Bug report</flux:radio> <flux:radio icon="light-bulb">Suggestion</flux:radio> <flux:radio icon="question-mark-circle">Question</flux:radio></flux:radio.group>Like all Flux components, these variants are fully keyboard accessible with proper focus management and screen reader support. The pills flow nicely and wrap to new lines when needed, while the buttons maintain consistent sizing and alignment.
Both variants support all the same props as the standard radio and checkbox components—icons, disabled states, and more.