Show Toast in Lightning Web Component

Hello friends, In this post you will learn, how to display toast in lightning web component(lwc). Toast is vary useful to notify user about action completion and any type of notification. So let's get started,

Show toast in lightning web component

To show toast in lightning web component you have to import ShowToastEvent from lightning/platformShowToastEvent. Please see below example.

ShowToast.html

 <template>
	<lightning-card title="Lightning Web Component">
		<div class="slds-align_absolute-center">
	            <lightning-button onclick={showtoast} variant="brand" label="Show Toast" class="slds-m-left_x-small">
		    </lightning-button>
		</div>
	</lightning-card>
 </template>

ShowToast.js

 import { LightningElement } from 'lwc';
 import { ShowToastEvent } from 'lightning/platformShowToastEvent';
 export default class ShowToat extends LightningElement {
    showtoast() {
        const event = new ShowToastEvent({
            title: 'LWC Toast',
            message: 'Say hi to Lightning Web Component!!',
            variant: 'success'
        });
        this.dispatchEvent(event);
    }
 }

ShowToast.js-meta.xml

 <?xml version="1.0"?>
 <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>51.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>		
		<target>lightning__RecordAction</target>
	</targets>
 </LightningComponentBundle>

Output:

 

Hope you like this post, for any feedback or suggestions please feel free to comment. I would appreciate your feedback and suggestions.
Thank you.