Toast

Use the lightning/toast module to display a toast notification with an icon, label, message, and links.

Toast notifications convey small pieces of information to the user, such as feedback and confirmation after the user takes an action. You can set toast notifications to disappear after a certain duration or until the user clicks the close button.

To specify your toast position and the maximum number of toasts to display, use lightning/toast with lightning/toastContainer.

lightning/toast implements the toast blueprint in the Salesforce Lightning Design System (SLDS). The toast adapts to SLDS 1 or SLDS 2 styling based on the org’s theme or the container app that you use.

To show a toast notification, call the function show(config, comp) from lightning/toast. The function creates a single page-level toast container if one does not exist. The show(config, comp) function contains two parameters:

• The config parameter references an object that specifies toast configuration attributes. See the Toast Configuration Attributes section for a list of properties to include in the config.
• The comp parameter is a reference to the local component or this.

This example creates an informational toast that displays until the user dismisses it. The toast title and message each include links, using two different approaches. The component’s handleClick handler triggers the toast opening.

1import { LightningElement } from 'lwc';
2import Toast from 'lightning/toast';
3
4export default class MyComponent extends LightningElement {
5    ...
6    handleClick() {
7        ...
8        Toast.show({
9            label: 'This is a toast label which shows {0}, you can learn more about its accessibility from {1}',
10            labelLinks : [{
11                url: 'https://www.lightningdesignsystem.com/components/toast/',
12                label: 'LDS link'
13            }, {
14                url: 'https://www.lightningdesignsystem.com/accessibility/guidelines/global-focus/#toasts',
15                label: 'toast guideline'
16            }],
17            message: 'I want to show a {salesforceLink} and a {slackLink}',
18            messageLinks: {
19                salesforceLink: {
20                    url: 'http://www.salesforce.com',
21                    label: 'Salesforce link'
22                },
23                slackLink: {
24                    url: 'https://slack.com',
25                    label: 'Slack link'
26                }
27            },
28            mode: 'sticky',
29            variant: 'info'
30        }, this);
31    }
32}

A page-level ToastContainer component manages and displays the toast component.

The required label string specifies the toast title and the optional message string is the toast message. The {0}, {1}, {salesforceLink}, and {slackLink} placeholders are replaced with links that are specified in their url properties.

label can have index-based or name-based link placeholders. In the case of index-based link placeholders, labelLinks must be defined as an array. Otherwise, labelLinks must be defined as individual objects. The same rules apply to message.

In the example, label uses index-based link placeholders, and message uses name-based link placeholders.

Toast is responsive to your screen resolution. For smaller screens or mobile environments, the toast’s icon and description (text stored in message, and messageLinks, for example) is not shown due to the screen’s width limitation. See Toast blueprint screen variants.

To provide links in toasts on small screens and mobile environments, we recommend that you include links in the toast’s title using label and labelLinks.

For more information on the toast configuration attributes, see the Specification tab.

When you use labelLinks or messageLinks, the content of label or message is rendered using lightning-formatted-rich-text. See the lightning-formatted-rich-text documentation for expected styling when rendering a link.

Specify the variant attribute with one of these values to set the component’s color and icon.

Passing in SLDS utility classes and using SLDS styling hooks aren’t supported with programmatic creation of toasts via Toast.show().

The mode attribute sets the component’s dismissal.

• dismissible - The component automatically disappears after a certain duration. The user can dismiss it early by clicking the close button. The time duration for dismissible is 4.8 seconds when the toast doesn’t contain a link or 9.6 seconds if the toast contains a link.
• sticky - The component stays on screen until the user clicks the close button.

If you don’t provide a mode value, the toast dismissal is determined by the value of variant and whether the toast has a link or links present in label or message.

lightning/toast specifies the role="alert" attribute that identifies the toast as an alert region. It uses aria-live="polite" so the screen reader doesn’t interrupt current announcements.

Toast container follows the SLDS Global Focus Orchestration accessibility guidelines. Use these keyboard shortcuts to navigate between toasts.

• Ctrl+F6 (Windows) or Cmd+F6 (Mac) - Move focus to the next toast, if any.
• Shift+Ctrl+F6 (Windows) or Shift+Cmd+F6 (Mac) - Move focus to the previous toast, if any.

Additionally, your keyboard settings determine if you must use the Fn key with F6.