Purpose

This blog post aims to guide you through mastering the showToast method in LWC, empowering you to communicate with users seamlessly and efficiently.

Scenario

Imagine a scenario where a user submits a form. Upon successful submission, you want to notify the user with a toast message. Here's how you can achieve this in LWC:

example.html

example.js

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

export default class Example extends LightningElement {
    handleFormSubmit() {
        // Perform form submission logic
        
        // Show toast message on successful submission
        const event = new ShowToastEvent({
            title: 'Success!',
            message: 'Form submitted successfully.',
            variant:  'success'
        });
        this.dispatchEvent(event);
    }
}

Explanation

In the example above, we import the ShowToastEvent from the lightning/platformShowToastEvent module. When the handleFormSubmit method is called (presumably after a successful form submission), we create a new instance of ShowToastEvent with the desired title, message, and variant (in this case, 'success' for a positive outcome). Finally, we dispatch the event to display the toast message to the user.

All Possible Values and Additional Customization:

Title: The title of the toast message.
Message: The content of the toast message.
Variant: Determines the appearance of the toast message (e.g., success, error, warning, info).
Mode: Controls how users can dismiss the toast message (sticky or dismissible).
Duration: Specifies the duration for which the toast message is visible.

Mastering the showToast method in LWC opens up a world of possibilities for enhancing user interaction in your applications. By effectively communicating with users through toast messages, you can improve user satisfaction and streamline the user experience. Experiment with different customization options and incorporate toast messages into your LWC projects to unlock the full potential of user communication.
Happy Coding!