Display toast notifications in Lightning Web Component

Toast notification pops up to alert users of a success, error, or warning. 

We need to import ShowToastEvent from the lightning/platformShowToastEvent module to

display a toast notification in Lightning Experience or Experience Builder sites.

The important point to note is ShowToastEvent isn’t supported on login pages in Experience

Builder sites.

Success Toast:

showNotification() {

        const evt = new ShowToastEvent({

            title: 'Success Message',

            message: 'Record inserted successfully ',

            variant: 'success',

            mode:'dismissible'

        });

        this.dispatchEvent(evt);

    }

Error Toast:

showNotification() {

        const evt = new ShowToastEvent({

            title: 'Error Message',

            message: 'Record inserted failed ',

            variant: 'error',

            mode:'dismissible'

        });

        this.dispatchEvent(evt);

    }

Warning Toast:

showNotification() {

        const evt = new ShowToastEvent({

            title: 'Warning Message',

            message: 'Some problem occured ',

            variant: 'warning',

            mode:'dismissible'

        });

        this.dispatchEvent(evt);

    }

Info Toast:

showNotification() {

        const evt = new ShowToastEvent({

            title: 'Information Message',

            message: 'Operation running in background ',

            variant: 'info',

            mode:'dismissible'

        });

        this.dispatchEvent(evt);

    }

Let us understand the use with an example below.

<template>

    <lightning-card  title="Testing Toast In LWC">

        <lightning-button label="Success Toast" onclick={successToastFunction}></lightning-button>

        <lightning-button label="Error Toast" onclick={errorToastFunction}></lightning-button>

        <lightning-button label="Warning Toast" onclick={warningToastFunction}></lightning-button>

        <lightning-button label="Information Toast" onclick={informationToastFunction}></lightning-button>

    </lightning-card>

</template>

import { LightningElement } from 'lwc';

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class TestingToastInLwc extends LightningElement {

    successToastFunction() {

        const evt = new ShowToastEvent({

            title: 'Success Message',

            message: 'Record inserted successfully ',

            variant: 'success',

            mode:'dismissible'

        });

        this.dispatchEvent(evt);

    }

    errorToastFunction() {

        const evt1 = new ShowToastEvent({

            title: 'Error Message',

            message: 'Record inserted failed ',

            variant: 'error',

            mode:'dismissible'

        });

        this.dispatchEvent(evt1);

    }

    warningToastFunction() {

        const evt2 = new ShowToastEvent({

            title: 'Warning Message',

            message: 'Some problem occured ',

            variant: 'warning',

            mode:'dismissible'

        });

        this.dispatchEvent(evt2);

    }

 

    informationToastFunction() {

        const evt3 = new ShowToastEvent({

            title: 'Information Message',

            message: 'Operation running in background ',

            variant: 'info',

            mode:'dismissible'

        });

        this.dispatchEvent(evt3);

    }

}

Add this LWC on the Home Page as shown below to test it.