Custom Toast Component with Multiple Toasts in LWC Salesforce

Suyash N
Suyash N 1.3k Views Add a Comment

Create a Custom Toast component in Lightning Web Component easily with a little code.

Salesforce standard Toast event doesn’t work on Visualforce Pages and components displayed in Lightning Apps. But with the help of this component, you can easily show toast on any type of screen in salesforce. Just create this component in your org and include it in your parent component. As Simple as That.

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 Component Features:
  • Single unit component
  • You can display Multiple Toast.
  • 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.

Working Demo



First We will create the toastNotification Lightning Web Component.

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

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


Now open the JavaScript file toastNotification.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.

When you want to show the Toast Notification, just get the toastNotification component, 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 … 🙂

Share This Article
Leave a comment
Notify of
Inline Feedbacks
View all comments