Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
import { api, LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class ToastComponent extends LightningElement {
@api title;
/* Title of the toast */
@api message;
Message of the toast. If you wanted to display the Clickable url in the toast then the message format will be
'Record {0} created! See it {1}!'
where {0} is the record Name and {1} is the url to the record.
You also need to provide the recordName variable in the template so that the template can be parsed.
For Example the message is Record {0} created! See it {1}!
And the recordName is John Doe & the url is & actionLabel is Here
then message in the toast will look like Record John Doe created! See it Here!
@api variant;
/* Variant of the toast. Should be one of the values, info, success, warning, error */
@api iconName;
/* Icon name of the toast. We are not using this variable */
@api delay;
/* Delay of the toast in milliseconds */
@api recordName;
/* Name of the record which will be displayed over the toast message */
@api url;
/* URL of the record where user will be redirected when user clicks on the url */
@api actionLabel;
/* Label of the clickable button. For Example Click Here, or Here */
showToastMessage = () => {
let toastMessage = {
title: this.title,
message: this.message,
variant: this.variant?this.variant:'info'
if(this.recordName && this.url){
toastMessage.messageData = [
url: this.url,
label: this.actionLabel,
setTimeout(() => {
} , this.delay);
fireToastMessage = (toastMessage) => {
window.console.log('Toast Message: ', toastMessage);
this.dispatchEvent(new ShowToastEvent(toastMessage) );
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="">
<masterLabel>Toast Component</masterLabel>
<!-- Configuring the design attributes -->
<targetConfig targets="lightning__FlowScreen, lightning__RecordPage, lightning__AppPage, lightning__HomePage">
<property name="title" type="String" label="Toast Title" description="Title to display. For Example, Record Created"/>
<property name="message" type="String" label="Toast Message"
description="Message you want to display. For Example, 'Record {0} created! See it {1}!'"/>
<property name="variant" type="String" default="info"
label="Toast Variant"
description="Type of toast you want to display. Valid values are info, success, warning, error"
<property name="delay" type="Integer" label="Delay"
description="Time in milli seconds If you want the delay to display the toast."/>
<property name="recordName" type="String" label="Record Name"
description="The Name of the record which has been created. For Example, Oil Gas Account"/>
<property name="url" type="String" label="Navigate to URL"
description="URL where user will be redirected after clicking on the link"/>
<property name="actionLabel" type="String" label="Button Label"
description="The text which will be dislayed over the url. For Example, Click Here, Here, Go to"/>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment