LWC Toast Messages Example

 

toastNotificationExampleLWC.html

 

<template>

    <lightning-card title="Notification" icon-name="custom:custom19">

        <lightning-button label="Show Error" onclick={showErrorToast}></lightning-button>

        <lightning-button label="Show Success" onclick={showSuccessToast}></lightning-button>

        <lightning-button label="Show Warning" onclick={showWarningToast}></lightning-button>

        <lightning-button label="Show Info" onclick={showInfoToast}></lightning-button>

    </lightning-card>

</template>

toastNotificationExampleLWC.js

import { LightningElement } from 'lwc';

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class ToastNotificationExampleLWC extends LightningElement {

    showErrorToast() {

        const evt = new ShowToastEvent({

            title: 'Toast Error',

            message: 'Some unexpected error',

            variant: 'error',

            mode: 'dismissable'

        });

        this.dispatchEvent(evt);

    }

    showSuccessToast() {

        const evt = new ShowToastEvent({

            title: 'Toast Success',

            message: 'Opearion sucessful',

            variant: 'success',

            mode: 'dismissable'

        });

        this.dispatchEvent(evt);

    }

    showWarningToast() {

        const evt = new ShowToastEvent({

            title: 'Toast Warning',

            message: 'Some problem',

            variant: 'warning',

            mode: 'dismissable'

        });

        this.dispatchEvent(evt);

    }

    showInfoToast() {

        const evt = new ShowToastEvent({

            title: 'Toast Info',

            message: 'Operation will run in background',

            variant: 'info',

            mode: 'dismissable'

        });

        this.dispatchEvent(evt);

    }

}

toastNotificationExampleLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>48.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>