--- schema_version: "1" id: 358885fb584192bca26b3b8677ff79e2f63d06de4ea8ca6aa7754e8eb56bb9c0 title: Toast collection: developer version: current locale: en-us portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/toast/lightning-toast.md canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-toast.html source_site: developer.salesforce.com content_type: documentation content_hash: 790e1b5fbfd2538bcfb35939f68a7a93ada59d36916d9319cb22e104479b1ae4 products: - Lightning Component Reference --- # Toast **`lightning-toast`** A notification element used to convey a label. **For Use In** Lightning Experience, Experience Builder Sites, Salesforce Mobile App ::::::tabset{tabs='[ "Example", "Develop", "Specifications"]'} :::::tab ::component-playground{component="toast" model="lwc" namespace="lightning"} ::::: :::::tab 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`. ## Design `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. | | SLDS 1 | SLDS 2 | | :------------- | :-------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------- | | **Design** | [Toast](https://v1.lightningdesignsystem.com/components/toast/) | [Toast](https://www.lightningdesignsystem.com/components/toast/) | | **For Use In** | Lightning Experience, Experience Builder sites, Salesforce mobile app | [Lightning Experience](https://help.salesforce.com/s/articleView?id=xcloud.customize_ui_enhancedlex.htm&type=5) | ## Usage 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](#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. ```javascript import { LightningElement } from 'lwc'; import Toast from 'lightning/toast'; export default class MyComponent extends LightningElement { ... handleClick() { ... Toast.show({ label: 'This is a toast label which shows {0}, you can learn more about its accessibility from {1}', labelLinks : [{ url: 'https://www.lightningdesignsystem.com/components/toast/', label: 'LDS link' }, { url: 'https://www.lightningdesignsystem.com/accessibility/guidelines/global-focus/#toasts', label: 'toast guideline' }], message: 'I want to show a {salesforceLink} and a {slackLink}', messageLinks: { salesforceLink: { url: 'http://www.salesforce.com', label: 'Salesforce link' }, slackLink: { url: 'https://slack.com', label: 'Slack link' } }, mode: 'sticky', variant: 'info' }, this); } } ``` A page-level [`ToastContainer` component](/docs/platform/lightning-component-reference/guide/lightning-toast-container.html) 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. **note:** External links always open in a new tab. Links that navigate to another page in your Salesforce org or links that use a relative path open in the same tab. Changing the link targets isn't supported. ## Small Screens and Mobile Environment `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](https://v1.lightningdesignsystem.com/guidelines/messaging/components/toasts/#flavor-variants-screen). 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`. ## Toast Configuration Attributes 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`](/docs/platform/lightning-component-reference/guide/lightning-formatted-rich-text.html). See the [`lightning-formatted-rich-text` documentation](/docs/platform/lightning-component-reference/guide/lightning-formatted-rich-text.html) for expected styling when rendering a link. ## Component Styling Specify the `variant` attribute with one of these values to set the component's color and icon. | Value | Color | Icon | | ---------------- | ------ | ----------------- | | `info` (default) | grey | `utility:info` | | `success` | green | `utility:success` | | `warning` | orange | `utility:warning` | | `error` | red | `utility:error` | Passing in SLDS utility classes and using [SLDS styling hooks](https://v1.lightningdesignsystem.com/components/toast/#Styling-Hooks-Overview) aren't supported with programmatic creation of toasts via `Toast.show()`. ## Toast Dismissal 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 20 seconds. - `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`. | Variant | Has link? | Default Mode | | --------- | --------- | ------------- | | `info` | Yes | `sticky` | | `info` | No | `sticky` | | `success` | Yes | `sticky` | | `success` | No | `dismissible` | | `warning` | Yes | `sticky` | | `warning` | No | `sticky` | | `error` | Yes | `sticky` | | `error` | No | `sticky` | ## Accessibility `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](https://v1.lightningdesignsystem.com/accessibility/guidelines/global-focus/#global-orchestration). 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. ::::: :::::tab ::component-specification{component="toast" model="lwc" namespace="lightning"} ::::: ::::::