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.

The new flux:toast.group component wraps your regular toast component to enable stacking. Just wrap your toast component in a group:

<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.

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.

Sometimes you want all your toasts visible at once—no hovering required. For those cases, we've added the expanded prop:

<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.

Just like individual toasts, the group component respects positioning. Want your stack in the top corner? No problem:

<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.

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!