We will create custom toast messages used to display error, warning, or success messages using LWC. Import ShowToastEvent from the lightning/platformShowToastEvent module to use the Toast notification.
Import the required modules in your LWC component’s JavaScript file:
Example :
import { LightningElement } from ‘lwc’;
import { ShowToastEvent } from ‘lightning/platformShowToastEvent’;
Inside your component’s JavaScript class, define a method to show the toast:
showCustomToast() {
const toastEvent = new ShowToastEvent({
title: ‘Custom Toast’,
message: ‘This is a custom toast message!’,
variant: ‘success’, // You can use other variants like ‘error’, ‘warning’, ‘info’
});
this.dispatchEvent(toastEvent);
}
In your component’s template (HTML file), create a button or any other UI element to trigger the toast:
<template>
<lightning-button label=”Show Custom Toast” onclick={showCustomToast}></lightning-button>
</template>
That’s it! When the button is clicked, the custom toast message will be displayed with the specified title, message, and variant.
Here is the code :
HTML File :
<template>
<lightning-card title=”CustomToastMesssages”>
<div class=”slds-m-around_medium”>
<lightning-input label=”Title here” value={_title} onchange={titleChange}></lightning-input>
<lightning-input label=”Message here” value={message} onchange={messageChange}></lightning-input>
<lightning-combobox
label=”Variant”
value={variant}
onchange={variantChange}
options={variantOptions}>
</lightning-combobox>
<p class=”slds-m-vertical_small”><lightning-button label=”Display Notification” onclick={showNotification}></lightning-button></p>
</div>
</lightning-card>
</template>
Javascript File :
import { LightningElement } from ‘lwc’;
import { ShowToastEvent } from ‘lightning/platformShowToastEvent’;
export default class MiscNotification extends LightningElement {
_title = ‘Sample Title’;
message = ‘Sample Message’;
variant = ‘error’;
variantOptions = [
{ label: ‘error’, value: ‘error’ },
{ label: ‘warning’, value: ‘warning’ },
{ label: ‘success’, value: ‘success’ },
{ label: ‘info’, value: ‘info’ },
];
titleChange(event) {
this._title = event.target.value;
}
messageChange(event) {
this.message = event.target.value;
}
variantChange(event) {
this.variant = event.target.value;
}
showNotification() {
const evt = new ShowToastEvent({
title: this._title,
message: this.message,
variant: this.variant,
});
this.dispatchEvent(evt);
}
}
You can customize the toast further by adding additional properties to the ShowToastEvent constructor. For example, you can set the duration, and mode, or even include actions in the toast. Refer to the Salesforce documentation on ShowToastEvent for more details on the available options: ShowToastEvent documentation https://developer.salesforce.com/docs/component-library/documentation/en/lwc/use_toast