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.

Go to top

Login to your account

Lesson: 33 | Display Toast Notifications

HTML