How to add a link to Chakra UI toast?

Question

I am using Chakra UI in my Next.js project. Is it possible to add links to a Chakra UI toast, or even format the text inside it? If yes, how?

Answer 1

yes, read the official documentation

You can add a custom render component

function CustomToastExample() {
  const toast = useToast()
  return (
    <Button
      onClick={() =>
        toast({
          position: 'bottom-left',
          render: () => (
            <Box color='white' p={3} bg='blue.500'>
              <YOUR_LINK_HERE>
            </Box>
          ),
        })
      }
    >
      Show Toast
    </Button>
  )
}