toastComponent.html

<template>
    
</template>

ToastComponent.js

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 https://www.google.com & 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 */

    connectedCallback(){
        this.showToastMessage();
    }

    showToastMessage = () => {
        let toastMessage = {
            title: this.title,
            message: this.message,
            variant: this.variant?this.variant:'info'
        };
        if(this.recordName && this.url){
            toastMessage.messageData = [
                this.recordName,
                {
                    url: this.url,
                    label: this.actionLabel,
                },
            ]
        }
        if(this.delay){
            setTimeout(() => {
                this.fireToastMessage(toastMessage);
            } , this.delay);
        }else{
            this.fireToastMessage(toastMessage);
        }
    }

    fireToastMessage = (toastMessage) => {
        window.console.log('Toast Message: ', toastMessage);
        this.dispatchEvent(new ShowToastEvent(toastMessage) );
    }
}

toastComponent.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Toast Component</masterLabel>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__FlowScreen</target>
    </targets>
    <!-- Configuring the design attributes -->
    <targetConfigs>
        <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"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>