Lesson: 33 | Display Toast Notifications

A component can send a toast notification that pops up to alert users of a success, error, or warning. A toast can also simply provide information.

HTML

<template>
    <lightning-card>
            <div class="slds-m-top_medium slds-m-bottom_x-large">
                <h2 class="slds-text-heading_medium slds-m-bottom_medium">Show Toast Events</h2>

            </div>
            <lightning-button-group>
                <lightning-button label="Show Success" onclick={handleSuccess}></lightning-button>
                <lightning-button label="Show Error" onclick={handleError}></lightning-button>
                <lightning-button label="Show Warning" onclick={handleWarning}></lightning-button>
                <lightning-button label="Show Info" onclick={handleInfo}></lightning-button>

            </lightning-button-group>

    </lightning-card>
</template>

JavaScript

Remember to import ShowToastEvent from the lightning/platformShowToastEvent module.

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

export default class ShowToastEventExample extends LightningElement {

    handleSuccess()
    {
        const showSuccess=new ShowToastEvent({
            title:'Success!',
            message:'This is Success Message',
            variant:'Success',
        });
        this.dispatchEvent(showSuccess);
    }
    handleError()
    {
        const showError=new ShowToastEvent({
            title:'Error!',
            message:'This is a Error Message',
            variant:'error',
        });
        this.dispatchEvent(showError);
    }
    handleWarning()
    {
        const showWarn=new ShowToastEvent({
            title:'Warning!',
            message:'This is a Warning Message',
            variant:'warning',
        });
        this.dispatchEvent(showWarn);
    }
    handleInfo()
    {
        const showInfo=new ShowToastEvent({
            title:'Info!',
            message:'This is info Message',
            variant:'info',
        });
        this.dispatchEvent(showInfo);
    }
}

Prev You need to login to have access to the quizzes. Next

Mastered by 7 users.

Lightning Web Components

A. Component Reference (27 lessons)

B. Lightning Web Components | Utilities (11 lessons)

C. Lightning Web Component Guide (41 lessons)

D. Java Script Methods for LWC (23 lessons)

E. HTML (18 lessons)

F. JavaScript (19 lessons)

Go to top

Login to your account

Lesson: 33 | Display Toast Notifications

HTML

Lightning Web Components