A component can send a
toast notification that pops up to
alert users of a success, error, or warning. A toast can also simply provide information. To display a
toast notification in Lightning Experience or Aura sites in Experience Cloud,
import ShowToastEvent from the lightning/platformShowToastEvent module.
Types of toast messages
Lightning Web Component
1)
Error
Toast
showErrorToast() {
const evt = new ShowToastEvent({
title: 'Toast Error',
message: 'Some unexpected error',
variant: 'error',
mode: 'dismissable'
});
this.dispatchEvent(evt);
}
2)
Success Toast
showSuccessToast() {
const evt = new ShowToastEvent({
title: 'Toast Success',
message: 'Opearion sucessful',
variant: 'success',
mode: 'dismissable'
});
this.dispatchEvent(evt);
}
3)
Warning Toast
showWarningToast() {
const evt = new ShowToastEvent({
title: 'Toast Warning',
message: 'Some problem',
variant: 'warning',
mode: 'dismissable'
});
this.dispatchEvent(evt);
}
4)
Info Toast
showInfoToast() {
const evt = new ShowToastEvent({
title: 'Toast Info',
message: 'Operation will run in background',
variant: 'info',
mode: 'dismissable'
});
this.dispatchEvent(evt);
}
