Toast Messages in Lightning

Why do we use toasts ? ………………………………………………………What are the types of toasts? ………………………………………………Where do we use them?……………………………………………………….

These questions are answered in this blog with examples

Toasts are used to enhance the user interaction by displaying the information, warning, success and error information when a button is clicked or a form data is entered. When client side validation is done, toasts helps the user in understanding about various instances like if the form data has been successfully been saved, if the form has any errors, warnings, if there is any information which the user needs to know etc.

Toasts are messages which are displayed below the header. They are used to depict various messages like success, information , errors and warnings using the help of an event called force:showToast.

Also toasts are used in place of alert messages which can enhance the look and feel of lightning.

ToastComponent.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <div class="slds-box slds-theme_default">
        <!-- Info Button, Color: Blue -->
        <lightning:button variant="brand" label="Info" title="Info" onclick="{! c.handleInfo }" />
        <!-- Delete Button, Color: Red -->
        <lightning:button variant="destructive" label="Delete" title="Delete" onclick="{! c.handleDelete }"/>
        <!-- Confirm Button, Color: Green -->
        <lightning:button variant="success" label="Confirm" title="Confirm" onclick="{! c.handleConfirm }"/>
        <!-- Warning Button, Color: White -->
        <lightning:button label="Warning" title="Warning" onclick="{! c.handleWarning }"/>
    </div>
</aura:component>

ToastController.js

({
    handleInfo : function (component, event, helper) {
        var mssg = "info";
        helper.showToastMessage(mssg, event);
    },
    handleDelete : function (component, event, helper) {
        var mssg = "error";
        helper.showToastMessage(mssg, event);
    },
    handleConfirm : function (component, event, helper) {
        var mssg = "success";
        helper.showToastMessage(mssg, event);
    },
    handleWarning : function (component, event, helper) {
        var mssg = "warning";
        helper.showToastMessage(mssg, event);
    }    
});

ToastHelper.js

({
    showToastMessage : function(mssg, event) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            mode: 'sticky',
            message: "You clicked: " +  event.getSource().get("v.label"),
            type : mssg
        });
        toastEvent.fire();
    }
})

Now let us see how it works……………………………

When Clicked on Info and Confirm respective toasts are displayed

When Clicked on Delete and Warning respective toasts are displayed

Considerations: force:showToast is an event which does not work on Lightning App and LightningOut App directly. There are some work arounds for the same. Check the work around :

Toast Message in Lightning Out App

Best Practices: Use the appropriate type of toast depending on the message to be conveyed. Not to use confusing colors which are contradicting the meaning of the message. Messages needs to be concise and should convey the right meaning.

More Resources :

force:showToast - specification - Salesforce Lightning Component Library