Displaying multiple toast

[claudiachua]

Hi team, I was wondering if it is possible to display multiple toasts with a click. (E.g. when the user clicks a button, two toasts will appear at the same time, stacked vertically)

I've tried playing with it but it seems that only the latest toaster.push gets displayed. Here's my experimental CodeSandbox

Thank you!

[SiTaggart]

Hey @claudiachua

It's not necessarily a use case we considered. Without getting into actual product specifics, what is the situation where you need to show multiple toasts from a single user action? We have some guidance specifically around errors, for example, to essentially roll up multiple errors into a single toast or use a callout if it's three or more, so that we're not over whelming the user. Firing multiple toasts at the same time might not be the best experience.

Independent of that, we'll look into why isn't stacking multi toasts, that took me by surprise. We could expand push to accept an array which might be a more intentional API decision. I'm just not sure if it's something we'd recommend.

[claudiachua]

Hi @SiTaggart 👋 ,

I'm attempting to display flash messages to inform the user they don't have access to something they clicked on. The user might received one or multiple (under 4) warning/info messages and I'm thinking of showing it with multiple toasts as the variants might be different.

Thanks for checking it out, I did found a workaround to display multiple toast with useState and without the need for toaster/ useToaster.

[claudiachua]

My team decided to implement it with the "Empty state" pattern instead of a component.

[SiTaggart]

OK, brilliant! That sounds like a much better design decision.

[SiTaggart]

This maybe irrelevant as the design changed, but for future readers, this functionality is being added to the toast package in #3749