QUESTION: Passing an Icon to cancel's label property?

[njdowdy]

Is there a way to use an icon for the cancel functionality's label property? From the types, it appears that only strings are allowed. But I am looking for something like this:

<Button variant="default" onClick={() => toast("Cancel Me: ", { cancel: { label: <MyIcon /> } })}>
        Send Toast!
</Button>

I can do the following:

const jsx = (t: string | number) => (
    <div className="flex flex-row justify-between">
      <h1>Cancel Me: </h1>
      <button onClick={() => toast.dismiss(t)}><MyIcon /></button>
    </div>
)
<Button variant="default" onClick={() => toast.custom((t) => jsx(t), { style: { display: "block" }})}> 
        Send Toast!
</Button>

But then I lose all the other default styles, which I want to keep.

The other method I found is this:

const jsx = (
    <div className="flex flex-row justify-between">
      <h1>Cancel Me: </h1>
      <button onClick={() => toast.dismiss()}><MyIcon /></button>
    </div>
)
<Button variant="default" onClick={() => toast(jsx, { style: { display: "block" }})}> 
        Send Toast!
</Button>

However, with this method I cannot be selective with the dismissing of toasts. I can only dismiss all toasts on click.

Is there another workaround that doesn't use toast.custom()?

Thanks!

[CanRau]

You can just do

toast.success(`Toast text`, {
  action: {
    label: (
      <>
        <div className="text-red">custom label</div>
      </>
    ),
    onClick(event) {
      console.log("toast.action.onClick", event);
    },
  },
});

I opened #280 which would make it work with Typescript 🤞🏼

[njdowdy]

Thanks, @CanRau!

[CanRau]

Has been merged, now we only need to wait for the next release 🙌🏼