New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add position prop to toaster #128
Comments
You mean on a per toast basis. You generally want all your toasts to always be from one position. If you want to switch to - fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:bottom-0 sm:right-0 sm:flex-col md:max-w-[420px]
+ fixed top-0 left-[50%] z-[100] flex max-h-screen w-full translate-x-[-50%] flex-col-reverse p-4 sm:right-0 sm:flex-col md:max-w-[420px] This will position the toast to the top center. (Might need some animations adjustments) |
Yes I do want to do it on a per toast basis. I agree that it should appear in the same position in most cases but I do have a use case where I would like it to appear in a different place for one of the toasts. |
One time one toast not enough, showing multiple toasts is the common senario |
@hiql You can do this using |
Are you planning to update Toast component to have that feature? See: https://react-hot-toast.com/docs/toast |
use 'bottom-left' / 'bottom-right' / 'top-left' / 'top-right' for setting display position of toast fix shadcn-ui#128
Hi, any update on this? |
We can customize the position using CSS classes because in the component the ClassName overwrites the original properties
|
For Top-Right, just remove
The above
|
I found that it is also a good idea to change |
Any plans on adding a 'position' prop that could be passed when using the useToast hook?
Something similar to react-hot-toast ⬇️
toast('Hello World', { position: 'top-center', });
The text was updated successfully, but these errors were encountered: