Custom Toast with custom duration In LWC

We use toast for showing error, warning, or success messages in our LWC based on use cases. lightning/platformShowToastEvent is used in LWC to create these types of toast. In few scenerio standard toast message will not work as exptected like in flow and community pages (especially registration page). To show toast in flow and community pages we have to create custom toast. This post will help us in creating custom toast with custom duraction in lwc.

Apart from flow and community pages, we can have other requirememt as well for custom toast. Few use case can be like

• Setting custom auto close
• Displaying formatted HTML content
• Displaying custom Icons
• Changing background colors

Let us see how we can achieve above use case in custom toast LWC.

1. Setting custom auto close

We can use setTimeout function to create auto close funcationality. Standard toast only support for 3 secs but we can customize this using setTimeout.

2. Displaying formatted HTML content

In few scenerion, we need to show formatted HTML content like hyperlink, formatted text or any tabular information as well. To create such kind of toast we can use lightning-formatted-rich-text LWC control to show formatted content.

3. Displaying custom Icons

We can show different type of icons as well on toast as per your requirement. To show customize icon we can use SLDS.

LWC Code for custom Toast

How to use custom toast?

To test custom toast component, we have to inclue below markup in lwc component where you want to use it.

<c-common-toast></c-common-toast>

And in js code use below code to show toast

this.template.querySelector('c-common-toast').showToast('success','<strong>Enter Valid Email and License Id<strong/>','utility:warning',10000);

showToast is public method which has signature showToast(messagetype,messagecontent,slds-icon,autocloseTime). if you don’t want 3,4 parameters, you can skip these, it will take default values.

Reference:

https://developer.salesforce.com/docs/component-library/bundle/lightning-platform-show-toast-event

Post where standard toast used

Stop deselecting lightning-dual-listbox list