.png)
Lightning Web Component(LWC) Toast Messages
.jpeg)
The Lightning Web component (LWC) can display a toast notification to notify users of success, error, or warning. A toast can also serve as a source of information. Import ShowToastEvent from the lightning/platformShowToastEvent module to display a toast notification in Lightning Experience or Lightning communities. We can send this toast in response to an event, such as a button click.
How to add toast message in Lightning Web component(LWC)
Import Toast Message
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
Dispatch toast Message
showToast() {
const event = new ShowToastEvent({
title: 'Toast message',
message: 'Toast Message',
variant: 'success',
mode: 'dismissable'
});
this.dispatchEvent(event);
}
Important Note: -
- Using the mode parameter, we can style toast to display error, success, warning, and information messages.
- We can also use variants to control the visibility of the toast. It can be displayed for three seconds until the user clicks to dismiss it, or a combination of the two.
- To trigger a toast from a Lightning web component, import ShowToastEventfrom lightning/platformShowToastEvent into the component's JavaScript class.
- Create and dispatch a ShowToastEvent with a few parameters.
Types of toast messages Lightning Web Component(LWC)
Error Toast
showErrorToast() {
const evt = new ShowToastEvent({
title: 'Toast Error',
message: 'Some unexpected error',
variant: 'error',
mode: 'dismissable'
});
this.dispatchEvent(evt);
}
Success Toast
showSuccessToast() {
const evt = new ShowToastEvent({
title: 'Toast Success',
message: 'Opearion sucessful',
variant: 'success',
mode: 'dismissable'
});
this.dispatchEvent(evt);
}
Warning Toast
showWarningToast() {
const evt = new ShowToastEvent({
title: 'Toast Warning',
message: 'Some problem',
variant: 'warning',
mode: 'dismissable'
});
this.dispatchEvent(evt);
}
Info Toast
showInfoToast() {
const evt = new ShowToastEvent({
title: 'Toast Info',
message: 'Operation will run in background',
variant: 'info',
mode: 'dismissable'
});
this.dispatchEvent(evt);
}
Here is the list of Toast Event Parameters:
| PARAMETER | TYPE | DESCRIPTION |
|---|---|---|
| title | String | The title of the toast, is displayed as a heading. |
| message | String | A string containing a message for the user. |
| messageData | String[] or Object | URL and label values that replace the {index} placeholders in the message string. |
| variant | String | The theme and icon are displayed in the toast. Valid values are: info—(Default) A gray box with an info icon. success—A green box with a checkmark icon. warning—A yellow box with a warning icon. error—A red box with an error icon. |
| mode | String | Determines how persistent the toast is. Valid values are: dismissable—(Default) Remains visible until the user clicks the close button or 3 seconds has elapsed, whichever comes first. pester—Remains visible for 3 seconds. sticky—Remains visible until the user clicks the close button. |
For more details please refer to the official link.
