Custom Toast question

[jason-shen]

Hi all

just got a question if i create a custom toast, and i don't want it to auto close, i want to have a close button inside the toast, what function i need to call to close the toast from a button, sorry i am pretty new to this, i have try to read the docs but couldn't find where to achieve that

thanks advance

Jason

[TimKolberger]

You can use the default toast UI with disabling the auto close and the built-in close button:

const CloseToastDemo = () => {
  const toast = useToast();

  function showToast() {
    toast({
      title: "Hello there",
      isClosable: true, // shows a close button
      duration: null // disables auto close
    });
  }

  return <Button onClick={showToast}>Show Toast</Button>;
};

or you can define a custom render function for your toast and close it with the onClose function.

const CloseToastDemo = () => {
  const toast = useToast();

  function showToast() {
    toast({
      duration: null, // disables auto close
      render: ({ onClose }) => (
        <Box>
          <Text>Hello there</Text>
          <Button onClick={onClose}>Close Me</Button>
        </Box>
      )
    });
  }

  return <Button onClick={showToast}>Show Toast</Button>;
};

[ljosberinn]

I'd wrap it in an useEffect because if the parent component rerenders, your toast would re-appear unless I'm mistaken?

[TimKolberger]

I updated the example with an onClick handler.