Custom Toast Component in Lightning

In Lightning we can use show toast event to show message to users. But they are not supported everywhere. So today we will create Custom Toast Component in Lightning. We have used SLDS toast here. So this component is supported on all UI, no matter if you are on LEX or in one.app

Here we have used lightning:notificationsLibrarycomponent component when ever standard method is supported, if it is not suppoerted then code will auto adjust and will use our custom UI. Both UI looks same so end user won’t see any difference in Custom Toast Component in Lightning, but it will give us great flexibility.

First we will create our base component, keep the API version latest to avoid any issue.

customToast.cmp

<aura:component >
    <aura:attribute name="messageType" type="string" default="success"/>
    <aura:attribute name="message" type="string"/>
    <aura:attribute name="autoCloseTime" type="Integer" default="5000"/>
    <aura:attribute name="autoClose" type="Boolean" default="true"/>
    <aura:attribute name="autoCloseErrorWarning" type="Boolean" default="true"/>
    <lightning:notificationsLibrary aura:id="notifLib"/>
    
    <aura:method name="showToastModel" action="{!c.showToast}" access="public">
        <aura:attribute name="message" type="String" access="public"/>
        <aura:attribute name="messageType" type="String" access="public"/>
    </aura:method>
    
    <div aura:id="toastModel" style="height: 4rem;" class="slds-hide">
        <div class="slds-notify_container slds-is-relative">
            <div class="{!'slds-notify slds-notify_toast slds-theme_'+v.messageType}" role="status">
                <span class="slds-assistive-text">{!v.messageType}</span>
              	<span class="{!'slds-icon_container slds-icon-utility-'+v.messageType+' slds-icon-utility-success slds-m-right_small slds-no-flex slds-align-top'}" title="{!v.message}">
                    <lightning:icon iconName="{!'utility:'+v.messageType}" size="small" variant="inverse" styleclass="slds-icon slds-icon_small"/>
                </span>
                <div class="slds-notify__content">
                    <h2 class="slds-text-heading_small ">{!v.message}</h2>
                </div>
                <div class="slds-notify__close">
                    <button class="slds-button slds-button_icon slds-button_icon-inverse" title="Close" onclick="{!c.closeModel}">
                        <lightning:icon iconName="utility:close" size="small" variant="inverse"/>
                        <span class="slds-assistive-text">Close</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</aura:component>

customToastController.js

({
    showToast : function(component, event, helper) {
                
        var params = event.getParam( 'arguments' );  
        try {
          component.find('notifLib').showToast({
                "variant": params.messageType,
                "message": params.message,
                "mode": "dismissable"
            });
        }
        catch(err) {
            component.set("v.message", params.message);
            component.set("v.messageType", params.messageType);
            
            $A.util.removeClass( component.find( 'toastModel' ), 'slds-hide' );
            $A.util.addClass( component.find( 'toastModel' ), 'slds-show' );
            
            var closeTime =  component.get("v.autoCloseTime");
            var autoClose =  component.get("v.autoClose");
            var autoCloseErrorWarning =  component.get("v.autoCloseErrorWarning");
            
            if(autoClose)
                if( (autoCloseErrorWarning && params.messageType != 'success') || params.messageType == 'success') {
                setTimeout(function(){ 
                    $A.util.addClass( component.find( 'toastModel' ), 'slds-hide' ); 
                    component.set("v.message", "");
                    component.set("v.messageType", "");
                }, closeTime);
            }
        }
       
	},
    
	closeModel : function(component, event, helper) {
		$A.util.addClass( component.find( 'toastModel' ), 'slds-hide' );
        component.set("v.messageType", "");
        component.set("v.messageType", "");
	}
})

And this is how our output will look like

This component have few attributes .

• message: Show message to UI.
• messageType: Severity type. Supported values are success, error and warning.
• autoCloseTime: It is used to give auto close time. Default is 5 seconds.
• autoClose : If you don’t want to auto close the component set it to false.
• autoCloseErrorWarning: If you want to auto close the component but not in case of error, warning then set it to true. Once set to true user need to manually close it. So they can easily see the error.

To use this component just add this component and call the method

// add the component in markup
<c:customToast aura:id="toastCmp"/>

//and in controller call the method
component.find("toastCmp").showToastModel(message, messageType);

Here is a sample app which I have used.

CustomToastApp.app
<aura:application extends="force:slds">
    <lightning:buttonGroup>
        <lightning:button label="Success" onclick="{!c.handleSuccess}"/>
        <lightning:button label="Warning" onclick="{!c.handleWarning}"/>
        <lightning:button label="Error" onclick="{!c.handleError}"/>
    </lightning:buttonGroup>
    <c:CustomToast aura:id="toastCmp"/>
</aura:application>

CustomToastAppController.js
({
	handleSuccess : function(component, event, helper) {
        component.find("toastCmp").showToastModel("This is success toast.", "success");
	},
    
    handleWarning : function(component, event, helper) {
        component.find("toastCmp").showToastModel("This is warning toast.", "warning");
	},
    
    handleError : function(component, event, helper) {
        component.find("toastCmp").showToastModel("This is error toast.", "error");
	}
})

I have updated this component in Lightning Web Component. You can check that here.

Do you want to add anything, let me know in comments. Happy programming 🙂