How to show toast notification in Lightning Web Component example.

Let’s talk about toast notification pop ups in Salesforce Lightning. Toast notification can pop up and display error, warning, success or information messages. The style of the notification depends on the variant of the toast. You don’t have to set variant of the toast – default value is info. To use toast in Lightning Web Component you need to import ShowToastEvent from the lightning/platformShowToastEvent module.

import { ShowToastEvent } from 'lightning/platformShowToastEvent'

Javascript Controller:

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent'

export default class ShowToastDemo extends LightningElement {
    showInfoToast() {
        this.showToast( 'Info Title', 'Info Message', 'info' );
    showSuccessToast() {
        this.showToast( 'Success Title', 'Success Message', 'success' );
    showWarningToast() {
        this.showToast( 'Warning Title', 'Warning Message', 'warning' );
    showErrorToast() {
        this.showToast( 'Error Title', 'Error Message', 'error' );

    showToast( title, message, variantStr ) {
        const event = new ShowToastEvent({
            title: title,
            message: message,
            variant: variantStr

In our demo lightning web component we will add 4 buttons – one for each variant of toast notification:

Info Toast Notification:

Success Toast Notification:

Warning Toast Notification:

Error Toast Notification: