Notifications Library powers to create Toast and Notices

We have been using window.alert, window.confirm, window.prompt for various reasons, all these screens runs in synchronous mode and pauses your execution logic until clicks on a button.

Below are the offerings of the Lightning frame work in the for of Notifications Library which runs in asynchronous mode

Messages can be displayed in notices and toasts. Notices alert users to system-related issues and updates. Toasts enable you to provide feedback and serve as a confirmation mechanism after the user takes an action.

Include one <lightning:notificationsLibrary aura:id="notifLib"/> tag in the component that triggers the notifications, where aura:id is a unique local ID. Only one tag is needed for multiple notifications.

Notices

Notices interrupt the user's workflow and block everything else on the page. Notices must be acknowledged before a user regains control over the app again. As such, use notices sparingly. They are not suitable for confirming a user’s action, such as before deleting a record. To dismiss the notice, only the OK button is currently supported.

Notices inherit styling from prompts in the Lightning Design System.

Here’s an example that contains a button. When clicked, the button displays a notice with the error variant.

==================================================================================

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >

  <lightning:notificationsLibrary aura:id="notifLib"/>

    <lightning:button name="notice" label="Show Notice" onclick="{!c.handleShowNotice}"/>

    

    <lightning:button name="toast" label="Show Toast" onclick="{!c.handleShowToast}"/>

</aura:component>

===================================================================================

({    

    handleShowNotice : function(component, event, helper) {

        component.find('notifLib').showNotice({

            "variant": "error",

            "header": "Something has gone wrong!",

            "message": "Unfortunately, there was a problem updating the record.",

            closeCallback: function() {

                alert('You closed the show notice!');

            }

        });

    },

      handleShowToast : function(component, event, helper) {

        component.find('notifLib').showToast({

            "title": "Notif library Success!",

            "message": "The record has been updated successfully.",

            "variant": "success"

        });

    }

})

===============================================================================

Show toast Example:

Show Modal Example: