Show Toast Notifications in Lightning Web Components (LWC)

Once I created a Lightning Web Component (LWC) form to create a new contact record in Salesforce and placed that component on the contact record page.

But when I enter values in the contact fields and click the Save Contact button, I don’t get any response, so I’m not sure whether the record was saved or if something went wrong.

Then I checked the contact object; the record was created. But when the user clicks Save or performs any action, if the record is saved successfully, show a Success Toast with the message “Contact created successfully.”

This helps users clearly understand what happened after they click the button, without checking logs or refreshing the page.

If you don’t show anything, users feel confused. This is where Toast Notifications come into the picture.

In this article, we will learn about how to show toast notifications in Lightning Web Components (LWC) using real Salesforce examples.

Table of Contents

What is a Toast Notification in Salesforce?

A Toast Notification in Salesforce is a small pop-up message that appears on the screen for a few seconds.

It usually appears at the top of the page and informs the user what just happened after they perform an action, such as clicking Save, Update, or Delete.

This message helps users understand the result without checking logs or refreshing the page.

You must have seen messages like:

Record Saved Successfully
Error while saving record
Please fill in the required fields
This is an information message

These short messages are called Toast Notifications. They are very important for a good user experience because they provide immediate feedback.

In Lightning Web Components (LWC), we use ShowToastEvent to display these toast messages. Using this event, you can display success, error, warning, and info messages in the UI.

Types of Toast Messages in LWC

There are 4 types of toast messages you can show in LWC.

Type	Use Case	Message
Success	When work is completed	Contact created successfully
Error	When something goes wrong	Required fields are missing
Warning	When the user should be careful	Duplicate record found
Info	Just information	Process started

Without Showing Toast Notifications in Lightning Web Components (LWC)

Below, I will first show you the Lightning Web Component created without using toast notifications. From this example, you will clearly see the difficulties, poor user experience, and understand why toast notifications are important in Salesforce.

Create LWC Component in Salesforce – HTML File

I created a simple HTML form with First Name, Last Name, and Email. With that added button labeled Save Contact.

<template>
    <lightning-card title="Create Contact">
        <div class="slds-p-around_medium">
            <lightning-input label="First Name" onchange={handleFirstName}></lightning-input>
            <lightning-input label="Last Name" onchange={handleLastName}></lightning-input>
            <lightning-input label="Email" onchange={handleEmail}></lightning-input>

            <lightning-button label="Save Contact" variant="brand" onclick={saveContact}></lightning-button>
        </div>
    </lightning-card>
</template>

JavaScript File in LWC

In the JS file, we implement the actions for the button and the fields that we declared in the HTML file.

import { LightningElement } from 'lwc';
import createContact from '@salesforce/apex/ContactController.createContact';

export default class LwcToastExample extends LightningElement {

    firstName = '';
    lastName = '';
    email = '';

    handleFirstName(event) {
        this.firstName = event.target.value;
    }

    handleLastName(event) {
        this.lastName = event.target.value;
    }

    handleEmail(event) {
        this.email = event.target.value;
    }

    saveContact() {
        if(!this.lastName) {
            return; 
        }

        createContact({ 
            firstName: this.firstName, 
            lastName: this.lastName, 
            email: this.email 
        })
        .then(() => {
            // Nothing shown to user
        })
        .catch(error => {
            console.error(error);
        });
    }
}

Meta.XML File in LWC

In the meta.xml file, we specify where we want to place the newly created lightning component so it displays in the UI and the user can interact with it.

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

    <masterLabel>LWC Toast Example</masterLabel>
    <description>Shows how to display toast notifications in LWC after saving a Contact record.</description>

    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
    </targets>

    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Contact</object>
            </objects>
        </targetConfig>
    </targetConfigs>

</LightningComponentBundle>

Toast Notifications in Lightning Web Components

Apex Controller in Salesforce

We created the Apex Controller because LWC cannot, in this example, directly insert a Contact record with custom logic.

In this scenario, the LWC needs to send the data (First Name, Last Name, Email) to Salesforce and create a Contact record.

To do this, we need a server-side method that can perform the database operation. That server-side method is written in Apex.

public with sharing class ContactController {
    @AuraEnabled
    public static void createContact(String firstName, String lastName, String email) {
        Contact con = new Contact(
            FirstName = firstName,
            LastName = lastName,
            Email = email
        );

        insert con;
    }
}

Proof of Concept

In the snapshot, you can see I provided contact details and clicked the Save Contact button. There, I was not getting any response, so I could find-

Did the record save?
Did something go wrong?
Do they need to fix anything?
Or is it just an information message?

But when I checked the contact list view, I found the record I created. But when any user performs an action in Salesforce, they always expect a response.

So here we can use the Toast notification, which displays a message based on the user’s action.

This time, the user is creating the record, so when they click the save button, they should see the “Record has been created” notification.

Show Toast Notifications in Lightning Web Components (LWC)

Now we will understand how the user experience improves after adding Toast Notifications to the Lightning Web Component.

Here, we only need to enhance the existing JavaScript code by adding toast notifications. There is no need to change the HTML file or the Apex controller.

By keeping the rest of the files the same and improving only the JS logic, you can clearly see how a small change can make a big difference in the user experience.

This also shows how easy it is to upgrade your component without rewriting the entire code.

JavaScript File in LWC

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import createContact from '@salesforce/apex/ContactController.createContact';

export default class LwcToastExample extends LightningElement {

    firstName = '';
    lastName = '';
    email = '';

    handleFirstName(event) {
        this.firstName = event.target.value;
    }

    handleLastName(event) {
        this.lastName = event.target.value;
    }

    handleEmail(event) {
        this.email = event.target.value;
    }

    saveContact() {
        if(!this.lastName) {
            this.showToast('Error', 'Last Name is required', 'error');
            return;
        }

        createContact({ 
            firstName: this.firstName, 
            lastName: this.lastName, 
            email: this.email 
        })
        .then(() => {
            this.showToast('Success', 'Contact created successfully', 'success');
        })
        .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);
    }
}

Now save this code, deploy it to your Salesforce org, and place the component on a Lightning page to test how the toast notifications appear when you perform different actions.

Proof of Concept

In the snapshot below, you can see that after entering the Contact details and clicking the Save Contact button, a toast notification appears, showing the ‘Success’ result of the action.

In this way, we can show toast notifications in Lightning Web Components (LWC).

Conclusion

I hope you have got an idea about what a toast notification is in Salesforce, its different types, and how to use them to show toast notifications in Lightning Web Components (LWC).