🔔 Toast Notifications in LWC: A Complete Guide with Practical Example

Lightning Web Components (LWC) provide a flexible and intuitive way to display toast messages—those small, temporary popup alerts that provide quick feedback to users. Whether you're confirming a success action, displaying an error, or simply notifying users, toast notifications are a user-friendly way to interact within the Salesforce Lightning Experience or Communities.

---

✨ What Is a Toast Message?

A toast is a lightweight, transient message that appears on the screen to notify the user of an event or result. It can be:

• Informational – To convey general information.

• Success-based – For confirming a positive action.

• Warning-oriented – For alerting the user about potential problems.

• Error-triggered – To inform users of critical issues.

To use toasts in LWC, we import and dispatch the ShowToastEvent from the lightning/platformShowToastEvent module.

---

📦 Importing Toast Functionality

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

This event can be dispatched from within any component to show a toast message.

---

🧰 ShowToastEvent Parameters Explained

Here are the key parameters you can use when creating a ShowToastEvent:

---

🎨 Toast Variants & Modes

✅ Variant Options:

• info – Gray info icon (default).

• success – Green with a checkmark.

• warning – Yellow triangle with an exclamation.

• error – Red box with error icon.

🕒 Mode Options:

• dismissable – User can close it, or it auto-closes after 3 seconds (default).

• pester – Auto-disappears after 3 seconds, no close button.

• sticky – Remains visible until the user closes it.

---

⚙️ Practical Example: alertDispatcher Component

Let’s create a Lightning Web Component named alertDispatcher to demonstrate how different toast messages are triggered using four distinct buttons.

---

📄 alertDispatcher.html

<template>
    <lightning-card title="Toast Notification Examples">

        <div class="slds-p-horizontal_x-small">
            <lightning-button variant="brand" 
                              label="Info" 
                              onclick={showInfoToast} 
                              class="slds-m-left_x-small">
            </lightning-button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <lightning-button variant="success" 
                              label="Success" 
                              onclick={showSuccessToast} 
                              class="slds-m-left_x-small">
            </lightning-button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <lightning-button variant="destructive-text" 
                              label="Warning" 
                              onclick={showWarningToast} 
                              class="slds-m-left_x-small">
            </lightning-button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <lightning-button variant="destructive" 
                              label="Error" 
                              onclick={showErrorToast} 
                              class="slds-m-left_x-small">
            </lightning-button>
        </div>
    </lightning-card>
</template>

In this template, we’ve placed four buttons inside a Lightning Card. Each button will dispatch a different type of toast based on its purpose.

---

📘 alertDispatcher.js

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

export default class AlertDispatcher extends LightningElement {

    showInfoToast() {
        const toastEvent = new ShowToastEvent({
            title: 'Information Notice',
            message: 'This is a general information toast.',
            variant: 'info',
            mode: 'dismissable'
        });
        this.dispatchEvent(toastEvent);
    }

    showSuccessToast() {
        const toastEvent = new ShowToastEvent({
            title: 'Action Successful',
            message: 'Your data was saved successfully!',
            variant: 'success',
            mode: 'pester'
        });
        this.dispatchEvent(toastEvent);
    }

    showWarningToast() {
        const toastEvent = new ShowToastEvent({
            title: 'Warning Issued',
            message: 'Please double-check the values entered.',
            variant: 'warning',
            mode: 'sticky'
        });
        this.dispatchEvent(toastEvent);
    }

    showErrorToast() {
        const toastEvent = new ShowToastEvent({
            title: 'Error Encountered',
            message: 'An unexpected error occurred. Try again later.',
            variant: 'error'
            // default mode is 'dismissable'
        });
        this.dispatchEvent(toastEvent);
    }
}

Each button click triggers a different method, which in turn dispatches a ShowToastEvent with a unique combination of title, message, variant, and mode.

---

✅ Best Practices When Using Toasts in LWC

• Use toasts sparingly and only for important user feedback.

• Match the variant to the type of message (don’t use success for warnings).

• Prefer pester or dismissable for non-critical notifications.

• Use sticky only for messages requiring strong user attention.

• Toasts are not screen-reader friendly by default; consider accessibility alternatives where needed.

---

🎯 Summary

Toast notifications are an essential part of providing real-time feedback to users in Salesforce Lightning. Using ShowToastEvent, developers can easily trigger toasts of different types to alert users in an engaging and visually clear way.

By incorporating toast messages into your LWC components like we did with alertDispatcher, you can improve user experience, encourage interactivity, and guide users toward completing their tasks smoothly.