[Toast] - Prop to select position of the toast.

[skshm2000ES]

Feature request

Overview

Currently, there is no option to decide the position of the toast. The default is bottom right but components like this are also extensively used at bottom left or top center. Tried doing this with CSS properties but this isnt as smooth as the original/default position.

Examples in other libraries

In AntD the placement of the popup can be passed as a string to decide the position. https://ant.design/components/notification

With ChakraUI position can be passed. https://chakra-ui.com/docs/components/toast

Who does this impact? Who is this for?

All users. Having this feature will reduce the number of components to be included and one single toast component can be used for all cases.

[benoitgrelard]

Hey @skshm2000ES,

The positioning of the toast is entirely your decision. Like all Radix primitives, it comes unstyled so you can make those design decision yourself.

Have a look at this example showing how you might style for different positions: https://codesandbox.io/s/toast-imperative-notifications-8jfl32

[nowlena]

Agreed, would greatly appreciate having this prop

[lfaletti]

Is this going to be fixed in future versions? We've been having this issue in our project, looks like a toast cannot be applied to different places without affecting the position of the others, so te design decision cannot actually be made per kind of notification.

[RubyHuntsman]

Even more, as sometimes you may need center bottom or center top top-left top top-right bottom-left bottom bottom-right

Hey @skshm2000ES,

The positioning of the toast is entirely your decision. Like all Radix primitives, it comes unstyled so you can make those design decision yourself.

Have a look at this example showing how you might style for different positions: https://codesandbox.io/s/toast-imperative-notifications-8jfl32