Notifications Library

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 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.

To create and display a notice, pass in the notice attributes using component.find('notifLib').showNotice(), where notifLib matches the aura:id on the lightning:notificationsLibrary instance.

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

1<aura:component>
2    <lightning:notificationsLibrary aura:id="notifLib"/>
3    <lightning:button name="notice" label="Show Notice" onclick="{!c.handleShowNotice}"/>
4</aura:component>

This client-side controller displays the notice.

1({
2    handleShowNotice : function(component, event, helper) {
3        component.find('notifLib').showNotice({
4            "variant": "error",
5            "header": "Something has gone wrong!",
6            "message": "Unfortunately, there was a problem updating the record.",
7            closeCallback: function() {
8                alert('You closed the alert!');
9            }
10        });
11    }
12})

To create and display a notice, pass in the notice attributes using component.find('notifLib').showNotice(), where notifLib matches the aura:id on the lightning:notificationsLibrary instance.

Toasts are less intrusive than notices and are suitable for providing feedback to a user following an action, such as after a record is created. A toast can be dismissed or can remain visible until a predefined duration has elapsed.

Toasts inherit styling from toasts in the Lightning Design System.

To create and display a toast, pass in the toast attributes using component.find('notifLib').showToast(), where notifLib matches the aura:id on the lightning:notificationsLibrary instance.

Here’s an example that contains a button. When clicked, the button displays a toast with the info variant and remains visible until you click the close button, denoted by the X in the top right corner.

1<aura:component>
2    <lightning:notificationsLibrary aura:id="notifLib"/>
3    <lightning:button name="toast" label="Show Toast" onclick="{!c.handleShowToast}"/>
4</aura:component>

This client-side controller displays the toast.

1({
2    handleShowToast : function(component, event, helper) {
3        component.find('notifLib').showToast({
4            "title": "Success!",
5            "message": "The record has been updated successfully."
6        });
7    }
8})

To display a link in the message, use the messageData attribute to pass in url and label values for the message string.

1({
2            handleShowToast : function(component, event, helper) {
3                component.find('notifLib').showToast({
4                "title": "Success!",
5                "message": "Record {0} created! See it {1}!",
6                "messageData": [
7                    'Salesforce',
8                    {
9                        url: 'http://www.salesforce.com/',
10                        label: 'here',
11                    }
12                ]
13            });
14        })

Using messageData is not supported for the Salesforce mobile app.

A notice appears when the system needs to communicate a message to the user; it doesn’t show up as a result of user action. A notice should rarely appear and generally should not be a part of a typical user flow. Contrastingly, a toast appears in reaction to a user action: creating, editing, deleting. For example, a user edits a record and saves it. For more information, see Messaging Design Guidelines.