A toast displays a message below the header at the top of a view. The message is specified by the message attribute.
This example displays a toast message “Success! The record has been updated successfully.”.
showToast : function(component, event, helper) { var toastEvent = $A.get("e.force:showToast"); toastEvent.setParams({ "title": "Success!", "message": "The record has been updated successfully." }); toastEvent.fire(); }
The background color and icon used by a toast is controlled by the type attribute. For example, setting it to success displays the toast notification with a green background and checkmark icon. This toast displays for 5000ms, with a close button in the top right corner when the mode attribute is dismissible.
While message supports a text-only string, messageTemplate supports a string containing links. You can provide a string with placeholders, which are replaced by labels provided in messageTemplateData. The parameters are numbered and zero-based. For example, if you have three parameters, {0}, {1}, and {2}, the labels are substituted in the order they're specified. The label is also used for the title attribute on the anchor tag.
This example displays a toast with a message that contains a link.
showMyToast : function(component, event, helper) { var toastEvent = $A.get("e.force:showToast"); toastEvent.setParams({ mode: 'sticky', message: 'This is a required message', messageTemplate: 'Record {0} created! See it {1}!', messageTemplateData: ['Salesforce', { url: 'http://www.salesforce.com/', label: 'here', } ] }); toastEvent.fire(); }
Attribute Name | Type | Description | Required? |
---|---|---|---|
title | String | Specifies the toast title in bold. | |
message | String | Specifies the message to display. | Yes |
messageTemplate | String | Overwrites message string with the specified message. Requires messageTemplateData. | |
messageTemplateData | Object | An array of text and actions to be used in messageTemplate. | |
key | String | Specifies an icon when the toast type is other. Icon keys are available at the Lightning Design System Resources page. | |
duration | Integer | Toast duration in milliseconds. The default is 5000ms. | |
type | String | The toast type, which can be error, warning, success, or info. The default is other, which is styled like an info toast and doesn’t display an icon, unless specified by the key attribute. | |
mode | String | The toast mode, which controls how users can dismiss the toast. The default is dismissible, which displays the close button. |