Include anchor tag in a Toast message

[claudiachua]

Hey team, I'm using the useToaster hook to push new toast. I was wondering if its possible to include an anchor link in the message?

const MyComponent = () => {
  const toaster = useToaster();

  const handleClick = () => {
    toaster.push({
      message: 'Error, please contact help center <Anchor>xx<Anchor>,
      variant: 'success',
    })
  }

...

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Displaying multiple toast (updated: 02/05/2024, similarity score: 86%)
• How to add an anchor inside of a tooltip? (updated: 06/14/2022, similarity score: 86%)
• Toast position when inside iframe - Answer (updated: 06/06/2023, similarity score: 85%)

[claudiachua]

Managed to figure it out, this is how I can add Anchor link into the Toast message.

      toaster.push({
        message: (  
        <Paragraph marginBottom="space0">
          Error, please contact help center. 
          <Anchor href="XXX">Contact support.</Anchor>
        </Paragraph>
        ),
        variant: "error",
      });