Custom Toast Notification in LWC Salesforce

Custom Toast Notification component is very useful as you can’t show SF standard Toast everywhere. Salesforce standard Toasts have a limitation that these are visible only on one.app. That means only standard Record Pages, home pages will be able to show the toast. For lightning components added to the VF page, you need to use a custom component.

This component is all-in-one & can show toast notification on all types of screens. Additionally you can set your own auto alose time.

Custom Toast Notification component Features:
  • Single unit component
  • WIll work on Record Detail Page, Home Page, VF Page, all…
  • Ability to set the Toast Auto Close Time.
  • Use Toast for Success, Error, Info, and Warning.

Custom Toast Notification in LWC Salesforce

Drawback:

The next toast will not be visible until the previous one is closed. That means only one toast notification will be visible at a time.

First We will create the CustomToast Lightning Web Component.

For creating a new LWC component, you need to use the VS Code IDE. 

After creating the component open the customToast.html file and paste the below code.

 

Now open the JavaScript file customToast.js and paste the below code.

 

Now we will call the component.

To use the component, first include this component in your Parent component where you want to show the Toast Notification. You can set your own Toast auto close time. The default time is 5 seconds.

Now when you want to show the Toast Notification, just get the customToast component and call its child method and pass the values.

For Success Toast Notification, use the below code-

For Error Toast Notification, use the below code-

Toast notification in LWC

To show Info Toast Notification, use the below code-

For Warning Toast Notification, use the below code-

 

Also Check:

For any queries or suggestions, comment below.

Cheers … Happy Coding … 🙂

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments