⚡ Create a Reusable Toast Utility in Salesforce LWC

🔹 Introduction

Toast messages are one of the most commonly used UI elements in Lightning Web Components (LWC). Whether you're saving a record, displaying an error, or giving warnings, toast notifications help you communicate with users effectively.

But repeating toast logic in every component leads to duplicate code. So today, we’ll build a Reusable Toast Utility that can be imported anywhere in your project with a single line!

🎯 Goal

• Create a universal toast helper function.
• Reduce duplicate code across LWCs.
• Trigger Success, Error, Warning, and Info toasts easily.
• Import and reuse toast logic in any component.

📁 Folder Structure

lwc
 ├── toastUtils
 ├── toastDemo

🧩 Step 1: Create toastUtils Utility Module

⚙️ JavaScript (toastUtils.js)

import { ShowToastEvent } from "lightning/platformShowToastEvent";

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

export { showToast };

📄 Meta File (toastUtils.js-meta.xml)

  65.0
  false

This utility is not exposed because it is not a UI component — it's only meant to be imported into other LWCs.

🧪 Step 2: Create a Demo Component to Test Toast Utility

🧾 HTML (toastDemo.html)

<template>
  <lightning-card variant="base">
    <lightning-button label="Show Success Toast" onclick={showSuccessToast}></lightning-button>
    <lightning-button label="Show Error Toast" onclick={showErrorToast}></lightning-button>
    <lightning-button label="Show Warning Toast" onclick={showWarningToast}></lightning-button>
    <lightning-button label="Show Info Toast" onclick={showInfoToast}></lightning-button>
  </lightning-card>
</template>

⚙️ JavaScript (toastDemo.js)

import { LightningElement } from "lwc";
import { showToast } from "c/toastUtils";

export default class ToastDemo extends LightningElement {
  showSuccessToast() {
    showToast(this, "Success!", "The operation was completed successfully.", "success");
  }
  showErrorToast() {
    showToast(this, "Error!", "There was an error processing your request.", "error");
  }
  showWarningToast() {
    showToast(this, "Warning!", "This is a warning message.", "warning");
  }
  showInfoToast() {
    showToast(this, "Info", "This is an informational message.", "info");
  }
}

📄 Meta File (toastDemo.js-meta.xml)

  65.0
  true
  
    lightning__AppPage
    lightning__RecordPage
    lightning__HomePage
  

🧠 How It Works

• The utility creates a reusable wrapper around ShowToastEvent.
• You pass this, title, message, and variant.
• No more repeated toast code in every component!
• Easy to scale across your Salesforce org.

📺 Watch the Full Video Tutorial

Here is the complete walkthrough on YouTube:
👉 Create a Reusable Toast Utility in Salesforce LWC — Watch on YouTube

🧾 Conclusion

Building a reusable toast utility keeps your code clean, modular, and easy to maintain. Instead of writing toast logic in every component, you now have a single shared helper that works across your entire Salesforce project.

This is one of the essential best practices when architecting enterprise-grade LWC applications.