`toast` title does not accept `Element` type

[MarkLyck]

It is quite common to add icons to toast messages such as "success" or "danger" variants.

However when trying to add an icon to the toast in shadcn UI it throws a typescript error saying it will only accept a string:

Type 'Element' is not assignable to type 'string | (string & ReactElement<any, string | JSXElementConstructor<any>>) | (string & Iterable<ReactNode>) | (string & ReactPortal) | undefined'.
  Type 'ReactElement<any, any>' is not assignable to type 'string & ReactPortal'.
    Type 'ReactElement<any, any>' is not assignable to type 'string’.

Despite this error, the code works fine and the icon is rendered in the title without issues. This is supported fine in Radix toast. But the accepted types seems to be incorrect? Or am I using it wrong?

Here's my code example:

toast({
        title: (
          <div className="flex items-center">
            <CheckIcon className="mr-2" />
            <span className="first-letter:capitalize">
              successfully updated ssid
            </span>
          </div>
        ),
      })

and this is what gets rendered:

[limitless-dev]

Use action in the toast as it accepts elements. You may want to add w-full though.

    toast({
      action: (
        <div className="w-full flex items-center">
          <CheckIcon className="mr-2" />
          <span className="first-letter:capitalize">
            successfully updated
          </span>
        </div>
      ),
    });

[fahmij8]

I've created PR in #1363 to resolve this issue. I hope the maintainer will see it at once.

[oncet]

Having the same problem and also wondering if I'm doing something wrong or not.

[Xentox-Phil]

Having the same problem and also wondering if I'm doing something wrong or not.

Hey since the PR is already there... and the fix is not hard just do it yourself. Thats the beauty of shadcn you have the source code in your poject.

Navigate to use-toast.ts and then replace the type with this: type ToasterToast = Omit<ToastProps, 'id' | 'title' | 'description' | 'action'> & { id: string title?: React.ReactNode description?: React.ReactNode action?: ToastActionElement }

[oncet]

Having the same problem and also wondering if I'm doing something wrong or not.

Hey since the PR is already there... and the fix is not hard just do it yourself. Thats the beauty of shadcn you have the source code in your poject.

Navigate to use-toast.ts and then replace the type with this: type ToasterToast = Omit<ToastProps, 'id' | 'title' | 'description' | 'action'> & { id: string title?: React.ReactNode description?: React.ReactNode action?: ToastActionElement }

Yes, that's what I ended up doing! Thank you.

[alamenai]

@shadcn , any updates regarding this?

[AndonMitev]

yeah same, any updates for it?

[alamenai]

@Xentox-Phil's answer worked for me.

[fahmij8]

Yup, to those who have this issue. You can refer to this answer right here https://github.com/shadcn-ui/ui/issues/896#issuecomment-1832842508

I'm closing my PR. Since it's not getting merged for a while. Maybe you can close the issue too @MarkLyck

[lxtadhamnawito]

I'm using the following implementation,

toast({
	description: 'Failed to create project',
	variant: 'destructive',
});

but what I want to make is

toast({
	description: (<someIcon /><p>Failed to create project<p>),
	variant: 'destructive',
});

whenever I try to use

I keep getting Cannot find name p, and suggestions

[oncet]

I'm using the following implementation,

toast({
	description: 'Failed to create project',
	variant: 'destructive',
});

but what I want to make is

toast({
	description: (<someIcon /><p>Failed to create project<p>),
	variant: 'destructive',
});

whenever I try to use

I keep getting Cannot find name p, and suggestions

You have a typo in your closing tag, it should be </p>.

And you prob need to wrap it in a single component, you can use fragment:

<><icon /><p>Foo</p></>

[lxtadhamnawito]

@oncet Thanks it was missing <></> the main thing. I appreciate your help