Chakra-ui: [Toast]: Add 'action' prop

[elmeerr]

Hi,
First...nice library! Congrats!

I just started a project and decided to try chakra on it but at my very first requirement I've missed the lack of an action property on toast.

What do I want to achieve

I'm setting up a PWA and one of the nice to have (to not say common requirement) is show a toast whenever there is new content available. When that happen I want to display a toast "New content available" + a button "RELOAD". With the current toast this is not straightforward as I need to create a custom component to do so and style it accordingly. In my opinion this could be handled by useToast itself

What do I suggest

Add a property called action to useToast that renders the action button.

How to use

const actionButton = (
  <Button onClick={}>
    action
  </Button>
);

toast({
        title: "A new version is available!",
        status: "info",
        duration: 9000,
        action: actionButton
    })

What do you think? Maybe you have reasons to not have this kind of property but I couldn't find (I'm really bad at searching 😄 )

Looking forward to hearing from you.

[segunadebayo]

Hi @elmeerr,

I see what you mean. For this approach, I'd recommend that you use the render option for the toast and just render your own alert that has this action button you're referring to.

When it comes to adding a button, it's better to be more explicit with the action button and handle it from your end. Things like the placement of the button, the variant, color, etc. will definitely need to be controlled by the user.

Internally, the toast uses the Alert component as the default. You can just leverage that.

function Example() {
  const toast = useToast();
  return (
    <Button
      onClick={() =>
        toast({
          duration: 9000,
          render: () => (
            <Alert status="info">
              <AlertTitle> A new version is available! </AlertTitle>
              <Button onClick={...}> Reload </Button>
            </Alert>
          ),
        })
      }
    >
      Show Toast
    </Button>
  );
}

Hope this helps.

[elmeerr]

@segunadebayo Indeed, the button and its properties need to be controlled by the user (as I did on my example) but I can't see this happening with button placement.

Most (if not all) applications, examples, etc. that uses a Toast have the button right aligned, I would consider this a best practice that should be enforced, so, no need to allow the user to change/choose button placement.

Codewise, I'd rather passing a component instance than render it on toast.

I thinks this:

const actionButton = (
  <Button onClick={} variant="" color="">
    action
  </Button>
);

toast({
        title: "message",
        status: "info",
        duration: 9000,
        action: actionButton 
    })

reads better than

toast({
        title: "message",
        status: "info",
        duration: 9000,
        render: <ComponentInstance prop1="" prop2="" propN="" /> 
   })

also, the user needs to create a custom component because we don't want to write render + Alert every time, then, to be dynamic, we need props (is it an icon button? round? which color? which size? do I create a component for each button variation with different props?)

Adding a action option would avoid developers thinking about all these details just because they want a button within the toast and definitely improve their experience using it.

If you think that this property wouldn't change much, no problem, you can close the issue. 😉

Thanks!

[segunadebayo]

@elmeerr, I see what you mean.

I'll give this some thought and we'll consider adding it in the future updates.

Thank you for sharing your ideas.