Toast Component Z-Index Api

[vignesh-sivaprakasam]

Hi team,
We are using Paste Toast component to display messages. When we use Toast Component it is hidden behind the topbar component which has higher z-index.
Code Sandbox : https://codesandbox.io/s/heuristic-water-to5u8?file=/src/index.tsx
Q1) Is there a way to set the z index for the toaster component ?

[SiTaggart]

Hi @vignesh-sivaprakasam

Is this for use inside of console? We know about an issue there and have just pulled in a ticket to the sprint that will add a flag via a prop to the Toaster to alleviate the z-index clash with the masthead.

[vignesh-sivaprakasam]

Hi @SiTaggart,
Yes,
 As mentioned in the code sandbox the z-index of topbar is higher than toaster which is causing the problem. And I hope you are trying to solve the same problem.

[TheSisb]

Hi @vignesh-sivaprakasam

We just merged a fix that will solve your z-index issues. Please pass the __console_patch boolean prop to either Toaster or ToastContainer, as per the docs: https://paste.twilio.design/components/toast#toaster-props
This will hardcode a higher z-index into our Toasts to make it appear over the masthead.

Let me know if you encounter any other issues.