Can a Toast support multiple viewports?

[randallmlough]

I want to have two types of Toasts. One that's used as a notification, like your example, and another that is used to inform the user of events (success, failure, etc.) that appears at a different viewport location (top center vs right).

I know this doesnt work, but I was thinking/hoping that we could do something like this

<ToastPrimitive.Provider>
   <App />
   <ToastNotificationViewport /> // viewport for notifications
   <ToastEventViewport /> // viewport for event messages
</ToastPrimitive.Provider>

[jjenzz]

that's not possible currently i'm afraid but it's a nice feature request :) worth creating an issue from this discussion perhaps

[jjenzz]

what a11y consequences? i would have though multiple viewports would be fine a11y-wise as long as the label and hotkey is different for each which the component could validate.

[benoitgrelard]

Yeah that's what I meant, relating to the hotkey. It just complicates things for the users quite a lot.
I feel like it's already quite difficult to have to know a shortcut, etc.
It just feels like the requirement isn't to do with having multiple viewports (ie. what would the labels be?) and rather about position but I could be wrong, there might a reason for multiple labelled regions too.

[jjenzz]

it seems @randallmlough's need for different positions is because of the different types of buckets, i don't think it is just a style thing. one is for notifications e.g. "New email", the other is for events e.g. "Saved".

i think it makes sense for the user to be able to differentiate these. they might want to pause a type (thinking dnd for notifications but still want to know if my form saved).

[benoitgrelard]

Yeah that makes sense, but I feel like that's quite a heavy burden on the users then to have to remember what goes where, etc.

[randallmlough]

@benoitgrelard valid points. The flip side to that is we (the developer) also have a burden on which toast is more important; since it is quite common to have two different types/locations of toasts. Could I put both type of toasts in the same location? Of course. But IMO there is a lot of value in separating toasts by type for the end user experience.

Additionally, I think the burden of remembering what goes where could be removed by abstracting that away much like your example here: https://www.radix-ui.com/docs/primitives/components/toast#abstract-parts

[dimitur2204]

Any update on this?