Lightning Web Component Toast Notifications

Toast Notifications

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.

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import ToastContainer from 'lightning/toastContainer';
export default class ToastContainerDemo extends LightningElement {
value = 'none';
values = 'success';
get options(){
    return[
        {label:'None', value:'none'},
        {label:'Top Center', value:'top-center'},
        {label:'Top Right', value:'top-right'},
        {label:'Top Left', value:'top-left'},
        {label:'Bottom Center', value:'bottom-center'},
        {label:'Bottom Right', value:'bottom-right'},
        {label:'Bottom Left', value:'bottom-left'},
    ];
}
get Variant(){
    return[
        { label: 'Error', value: 'error' },
        { label: 'Warning', value: 'warning' },
        { label: 'Success', value: 'success' },
        { label: 'Info', value: 'info' },
    ];
}
handleChange(event){
    this.value = event.detail.value;
}
handleVariant(event){
    this.values = event.detail.value;
}
showSuccessToast(){
    const toastContainer = ToastContainer.instance();
    toastContainer.maxShown = 5;
    toastContainer.toastPosition = this.value;
    const evt = new ShowToastEvent({
        title: "sample title",
        message: "sample message data",
        variant: this.values,
        mode: 'sticky'//'dismissable'
    }); 
    this.dispatchEvent(evt);
}
}