Toast Notifications in LWC with example

In this blog, we will discuss the Toast Notifications in LWC with an example. LWC, which stands for Lightning Web Components, provides a modern way to build UI components in Salesforce. One of the useful features that LWC offers to improve user experience is the Toast Notifications.

Toast notifications are small pop-up messages that appear at the top of the screen for a few seconds and then disappear automatically. In this way, they help by giving instant feedback to users, such as showing success messages, error alerts, or important updates.

Additionally, Salesforce provides the ShowToastEvent in LWC, which is part of the lightning/platformShowToastEvent module, to display these messages effectively.

Let’s see how can we implement Toast Notification in LWC

To execute Toast Notification we have to first import it first from its module “lightning/platformShowToastEvent”. Below is the syntax of how can we import ShowToastEvent

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

After importing we have to create and dispatch the event with title, message, variant, and mode properties.

showToastNotfication() {
const showToastEv = new ShowToastEvent({
title: 'Demo Notification',
message:
'Displaying Toast Notification',
});
this.dispatchEvent(showToastEv);
}

Here we have created a function showToastNotification in which we have created an event of type ShowToastEvent with name showToastEv with its attributes (title and message) and then we have dispatched that event with this.dispatchEvent.

Different types of  Toast Notification in LWC

Toast Notification has 4 different types of variants. The following are the types:

1. Success – Displays a success message.
2. Error – Shows an error message.
3. Info – Displays a warning message.
4. Warning – Provides additional information.

Let’s take an example of a basic toast notification. Here we will be creating a button which displays the notification whenthe  user clicks on it. To create the LWC component in VS Code we have two options:

1. Right-clicking on the lwc folder and then creating the lightning web component
2. Another way is Cmd/Ctrl +Shift + P and then open the SFDX command to create a Lightning web component.

So, we have created a lwc component DemoToastNotification to show the example. We will be deploying the component on a Lightning App Page. Below is the syntax for displaying the notification.

demoToastNotification.html

<template>
<lightning-card title="Demo Toast Notification">
<lightning-button label="Display Toast" title="Display Toast" onclick={displayToastNotification}></lightning-button>
</lightning-card>
</template>

demoToastNotification.js

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

export default class DemoToastNotification extends LightningElement {

displayToastNotification() {
const evt = new ShowToastEvent({
title: 'You successfully toastified!',
message: 'Displaying Toast Notification',
});
this.dispatchEvent(evt);
}
}

demoToastNotification.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>62.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle>

OUTPUT

Let’s understand each variant with an example.

Success

In this scenario, we are creating an account record with the use of the lightning record form. We are displaying a Toast Notification when the user clicks on the Save button. Below is the code to implement this scenario.

import { LightningElement,api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';export default class SuccessToastExample extends LightningElement {displayToastNotification() {
const evt = new ShowToastEvent({
title: 'Success',
message: 'Account created successfully',
variant: 'success'
});
this.dispatchEvent(evt);
}handleSave() {
this.displayToastNotification()
}}

<template>
<lightning-card title="Success variant">
<lightning-record-edit-form object-api-name="Account">
<div class="slds-box slds-theme_default">
<lightning-input-field field-name="Name"></lightning-input-field>
<lightning-input-field field-name="Phone" ></lightning-input-field>
<lightning-input-field field-name="Industry" ></lightning-input-field>
<lightning-input-field field-name="Website" ></lightning-input-field>
</div>
<lightning-button variant="brand" label="Save" title="Save" onclick={handleSave}></lightning-button>
</lightning-record-edit-form>
</lightning-card>
</template>

OUTPUT

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

export default class ErrorToastExample extends LightningElement {

displayToastNotification() {
const evt = new ShowToastEvent({
title: 'Error',
message: 'Some error occurred while creating account',
variant: 'error'
});
this.dispatchEvent(evt);
}

handleSave() {
this.displayToastNotification()
}
}

<template>
<lightning-card title="Error variant">
<lightning-record-edit-form object-api-name="Account">
<div class="slds-box slds-theme_default">
<lightning-input-field field-name="Name"></lightning-input-field>
<lightning-input-field field-name="Phone" ></lightning-input-field>
<lightning-input-field field-name="Industry" ></lightning-input-field>
<lightning-input-field field-name="Website" ></lightning-input-field>
</div>
<lightning-button variant="brand" label="Save" title="Save" onclick={handleSave}></lightning-button>
</lightning-record-edit-form>
</lightning-card>
</template>

Alert

In this scenario, we will be displaying an alerting type toast notification. We have created a component as “alertToastExample”

alertToastExample.js

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

export default class AlertToastExample extends LightningElement {

showWarningToast() {
const event = new ShowToastEvent({
title: 'Warning',
message: 'This action may have unintended consequences.',
variant: 'warning',
});
this.dispatchEvent(event);
}}

infoToastExample.html

<template>
<lightning-card title="Alert variant">
<lightning-record-edit-form object-api-name="Account">
<div class="slds-box slds-theme_default">
<lightning-input-field field-name="Name"></lightning-input-field>
<lightning-input-field field-name="Phone" ></lightning-input-field>
<lightning-input-field field-name="Industry" ></lightning-input-field>
<lightning-input-field field-name="Website" ></lightning-input-field>
</div>
<lightning-button variant="brand" label="Save" title="Save" onclick={showWarningToast}></lightning-button>
</lightning-record-edit-form>
</lightning-card>
</template>

OUTPUT

Also Read – How to Use the getRecord Method in Salesforce LWC

Info

In this scenario, we will be displaying an  Info type variant for that we have created a component “infoToastExample”

infoToastExample.js

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

export default class InfoToastExample extends LightningElement {

showInfoToast() {
const event = new ShowToastEvent({
title: 'Information',
message: 'Your request is being processed.',
variant: 'info',
});
this.dispatchEvent(event);
}}

infoToastExample.html

<template>
<lightning-card title="Info variant">
<lightning-record-edit-form object-api-name="Account">
<div class="slds-box slds-theme_default">
<lightning-input-field field-name="Name"></lightning-input-field>
<lightning-input-field field-name="Phone" ></lightning-input-field>
<lightning-input-field field-name="Industry" ></lightning-input-field>
<lightning-input-field field-name="Website" ></lightning-input-field>
</div>
<lightning-button variant="brand" label="Save" title="Save" onclick={showInfoToast}></lightning-button>
</lightning-record-edit-form>
</lightning-card>
</template>

OUTPUT

Understand different toast attributes:

• title:  The title attribute specifies the heading of the toast message.
• message:  The message attribute holds the text displayed inside the toast notification.
• variant: The variant attribute defines the type of toast message. Available options: success, error,     warning, info.
• messageData: The messageData attribute allows dynamic content inside messages using placeholders.
• mode:  The mode attribute controls how the toast behaves:
• dismissible: (default): Users can manually close the toast.
• pester: The toast stays until the user closes it.
• sticky: The toast remains until an action is taken.

Now let’s take a practical where we can use different variants as per the scenario

Scenario – Here will be creating a record imperatively using Apex. We will display the different variants of Toast. Hence, showing success If the record is successfully created, Error if it throws any error with an error message, Alert and Info as needed.

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

// importing apex method to create account record
import createAccountRec from '@salesforce/apex/AccountController.createAccount';
export default class CreateAccountRecord extends LightningElement {

@track accName;phone;industry;website = ''; // store the value of inputs

handleChange(event) {
this[event.target.name] = event.target.value;
}
handleSave() {
let messages = [];

// to check if Account is empty then show error toast
if (!this.accName) messages.push('Account Name is required.');

// to check if Phone is empty then show error toast
if (!this.phone) messages.push('Phone is required.');

// if industry is empty then we display warning toast to let user know
if (!this.industry) this.showToast('Warning', 'Industry field is empty.', 'warning');

// if website is empty we are displaying the info type toast
if (!this.website) this.showToast('Info', 'Consider adding a website for better visibility.', 'info');

// we are checking if message length is greater than 0 then toast will pop up
if (messages.length > 0) {
this.showToast('Error', messages.join(' '), 'error');
return;
}

createAccountRec({ accName: this.accName, industryVal: this.industry, phoneVal: this.phone, websiteVal: this.website })
.then(result => {
this.showToast('Success', `Account created successfully! ID: ${result}`, 'success');
this.clearFields();
})
.catch(error => {
this.showToast('Error', error.body.message, 'error');
});
}

showToast(title, message, variant) {
const event = new ShowToastEvent({
title: title,
message: message,
variant: variant
});
this.dispatchEvent(event);
}

clearFields() {
this.accName = '';
this.phone = '';
this.industry = '';
this.website = '';
}
}

createAccountRecord.html

<template>
<lightning-card title="Create Account" icon-name="standard:account">
<div class="slds-m-around_medium">
<lightning-input label="Account Name" name="accName" value={accName} onchange={handleChange} required></lightning-input>
<lightning-input label="Phone" name="phone" value={phone} onchange={handleChange} required></lightning-input>
<lightning-input label="Industry" name="industry" value={industry} onchange={handleChange}></lightning-input>
<lightning-input label="Website" name="website" value={website} onchange={handleChange}></lightning-input>
<lightning-button label="Save" variant="brand" onclick={handleSave} class="slds-m-top_medium"></lightning-button>
</div>
</lightning-card>
</template>

OUTPUT

public with sharing class AccountController {@AuraEnabled
public static Id createAccount(String accName, String industryVal, String phoneVal, String websiteVal) {Account acc = new Account(Name = accName, Industry = industryVal, Phone = phoneVal, Website = websiteVal);
insert acc;
System.debug('Error');
return acc.Id;
}
}

FAQs

1. What is the use of Toast Notification in LWC?

Toast notifications in LWC provide real-time feedback to users about various events, such as success messages, errors, warnings, or general information.

2. How do I handle errors using toast notifications?

You can display error messages by catching exceptions and passing the error message to the toast notification with the variant set to ‘error’.

3. Do toast notifications work in Aura components?

Yes, toast notifications work in Aura; however, the syntax differs compared to LWC. In Aura components, you need to use force:showToast to display toast messages.

Conclusion

In conclusion, Toast Notification in LWC is a powerful feature that enhances user experience by providing instant feedback. Whether you need to show success, error, warning, or informational messages, toast notifications help make interactions smoother. Furthermore, with different attributes available, they contribute to making your Salesforce applications more interactive and user-friendly.

Get a complete Roadmap To Learn Salesforce Admin And Development

Name *

First

Last

Email *

Comment or Message

Submit