LWC: Salesforce Toast Notification Framework

🔔 Salesforce Toast Notification Framework

Reusable Lightning Web Component framework for displaying modern, customizable, and centralized toast notifications across Salesforce applications.

📖 Project Overview

Salesforce Toast Notification Framework provides a reusable and centralized approach for displaying success, error, warning, and informational notifications inside Lightning Web Components.

Instead of duplicating toast logic throughout an application, developers can dispatch a standardized event and allow the framework to render consistent notifications with configurable styling, positioning, icons, duration, and user interactions.

This project promotes better maintainability, cleaner component architecture, and a consistent user experience across Salesforce applications.

🔗 View Source Code ⬇ Download ZIP

✨ Key Features

Feature	Description
Centralized Toast Management	Single framework controls notifications across the application.
Multiple Variants	Success, Error, Warning, and Information messages.
Custom Duration	Configure auto-dismiss timing dynamically.
Stacked Notifications	Supports displaying multiple toasts simultaneously.
Reusable Architecture	Works across multiple Lightning pages and components.
Modern UI	SLDS-inspired design with customizable styling.

🏗 Architecture

Application Components
        │
        ▼
Dispatch Toast Event
        │
        ▼
Toast Service / Utility
        │
        ▼
Toast Container
        │
        ▼
Toast Renderer
        │
        ▼
Success | Error | Warning | Info

📁 Project Structure

salesforce-toast-notification
│
├── force-app
│   └── main
│       └── default
│
├── lwc
│   ├── toastNotification
│   ├── toastContainer
│   ├── toastService
│   └── demoComponent
│
├── staticresources
├── permissionsets
└── README.md

💻 Toast Event Example

this.dispatchEvent(
    new CustomEvent('showtoast', {
        detail: {
            title: 'Success',
            message: 'Record saved successfully.',
            variant: 'success'
        }
    })
);

⚙️ Toast Configuration

{
    title: 'Warning',
    message: 'Please review required fields.',
    variant: 'warning',
    duration: 5000,
    dismissible: true
}

🎨 Supported Variants

✅ Success

❌ Error

⚠ Warning

ℹ Information

🔄 Notification Lifecycle

1. User performs an action.
2. Component dispatches toast event.
3. Toast container receives notification.
4. Toast is rendered with proper styling.
5. User views notification.
6. Toast auto-dismisses or closes manually.

🧩 Usage Example

<c-toast-notification>
</c-toast-notification>

import showToast from 'c/toastService';

showToast({
    title: 'Success',
    message: 'Account created successfully',
    variant: 'success'
});

🚀 Benefits

• Improves user experience.
• Standardizes notifications across applications.
• Reduces duplicated code.
• Easy integration into existing LWCs.
• Enterprise-ready notification management.

📦 Deployment

sf org login web -a myOrg

sf project deploy start \
--source-dir force-app \
-o myOrg

🔗 View Source Code ⬇ Download ZIP

📌 Conclusion

Salesforce Toast Notification Framework simplifies how notifications are managed within Lightning Web Components. By centralizing toast rendering and configuration, developers can deliver a consistent and maintainable user experience while reducing repetitive implementation effort.