Modal and Toast component z-index

[vignesh-sivaprakasam]

Hi team,
We have a use case where have to use modal and toast together. When we use these two components together Toast component is behind Modal. Is there a way to bring the toast component forward ?
[Code sandbox] (https://codesandbox.io/p/sandbox/lingering-tdd-gvx2q7)

[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:

• Toast Component Z-Index Api (updated: 03/08/2023, similarity score: 87%)
• Displaying multiple toast (updated: 02/05/2024, similarity score: 87%)
• Handling state changes with toast (updated: 07/27/2022, similarity score: 85%)

[krisantrobus]

Hi @vignesh-sivaprakasam, by default the Toast component does not have the zIndex styling. It's actually applied to the toast container (Toaster) that is used with the hook. I have forked off of your sandbox to show an example of the toast being pushed when the "Done" button is clicked in this example. For reference the Modal overlay zIndex is 80 and the Toaster component is 90.

The main code change is:

...
  const toaster = useToaster();

  const addToast = () =>
    toaster.push({
      message: "Your function is currently being deployed.",
      variant: "neutral",
      id: "custom_id",
      dismissAfter: 4000,
      onDismiss: () => alert("dismissed"),
    });

  return (
    <div>
      <Toaster {...toaster}/>
    </div>
  )

I hope this answers your question.