Show Success, Error, Information and Warning messages in LWC

This post explains how can we show success and error messages in LWC with the help of lightning toast. With the help of toast you can show any kind of of message in LWC.

Toast is basically used to show message after performing any action by user based on the condition.

We can customize style and visibility of toast according to our requirement. Below is the attribute which you can use to customize the toast:

• title : It is required parameter. Title display as heading of message. Title will be displayed in bold.
• message : It is also a required parameter. In this attribute you can specify the message which you want to show in the toast.
• duration : This value is used to set toast visibility duration. Default value of this attribute is 3000 ms.
• variant : This attribute is used for the appearence of the toast. Valid values for this attribute are:

info : Grey color toast for showing information message(Default value of this attribute).

success : Green color toast for showing success message.

warning : Orange color toast for showing warning message.

error : Red color toast for showing error message.

• mode :  This attribute is used to control how user can close the toast. Valid values for this attributes are: 

dismissible : It is a default value of this attribute. Toast will visible until you hit close button or duration has elapsed(3000 ms by default).

pester : With this value user can't close the toast because there is no close button. Toast will close automatically after duration has elapsed.

sticky : With this value toast will only close after uset hit the close button. 

ShowErrorMessage.cmp :

<template>

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

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

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

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

</template>

ShowErrorMessage.js :

import { LightningElement,track,api } from 'lwc';

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class ShowErrorMessage extends LightningElement {

    success(){

        const event = new ShowToastEvent({

            title: 'Success Message',

            message: 'This is used to show success message',

            variant: 'success',

            mode: 'dismissable'

        });

        this.dispatchEvent(event);

    }

    error() {

        const event = new ShowToastEvent({

            title: 'Error Message',

            message: 'This is used to show error message',

            variant: 'error',

            mode: 'dismissable'

        });

        this.dispatchEvent(event);

    }

 

    warning(){

        const event = new ShowToastEvent({

            title: 'Warning Message',

            message: 'This is used to show warning message',

            variant: 'warning',

            mode: 'dismissable'

        });

        this.dispatchEvent(event);

    }

 

    info() {

        const event = new ShowToastEvent({

            title: 'Info Message',

            message: 'This is used to show information message',

            variant: 'info',

            mode: 'dismissable'

        });

        this.dispatchEvent(event);

    }

}

Thanks, 
Lovesalesforceyes