Add position prop to toaster

[minjie0501]

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', });

[shadcn]

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 top center, you can do this by changing the classes here: https://github.com/shadcn/ui/blob/faf05aa086c27d1d7a021cb716768ac2e1261f65/apps/www/components/ui/toast.tsx#L17

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

[minjie0501]

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.

[hiql]

One time one toast not enough, showing multiple toasts is the common senario

[shadcn]

@hiql You can do this using TOAST_LIMIT.

[AdisonCavani]

react-hot-toast API has id prop. It allows to create multiple toasts without duplication.

Are you planning to update Toast component to have that feature?

See: https://react-hot-toast.com/docs/toast @: Prevent duplicate toasts

[Ryuk-hash]

Hi, any update on this?

[charleston10]

We can customize the position using CSS classes because in the component the ClassName overwrites the original properties This is designed for customization, that being said, we can follow the code below

<Button
  variant={'default'}
  onClick={() => {
    toast({
      className: cn(
        'top-0 right-0 flex fixed md:max-w-[420px] md:top-4 md:right-4'
      ),
      variant: 'default',
      title: 'Uh oh! Something went wrong.',
      description: 'There was a problem with your request.',
      action: <ToastAction altText="Try again">Try again</ToastAction>
    })
  }}
>
  Save
</Button>

[AuroraLantean]

For Top-Right, just remove sm:top-auto sm:bottom-0 from the Shadcn toast.tsx. So the result would be:

"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4  sm:right-0  sm:flex-col md:max-w-[420px]",

The above cn function is defined here:

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

[goktugerce]

For Top-Right, just remove sm:top-auto sm:bottom-0 from the Shadcn toast.tsx. So the result would be:

"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4  sm:right-0  sm:flex-col md:max-w-[420px]",

I found that it is also a good idea to change data-[state=open]:sm:slide-in-from-bottom-full to data-[state=open]:sm:slide-in-from-top-full for a nicer animation.