---
schema_version: "1"
id: e63758183875f3d5a7d881917752fe40137f3e9fad210009ed4836b9fa58713d
title: Toast Container
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/toastContainer/lightning-toast-container.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-toast-container.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 6f76243114d58415dc1c1dcc194e54bf1fac5321362e2f6af8ed61db8a70e535
products:
  - Lightning Component Reference
---
# Toast Container

**`lightning/toastContainer`**

Manages a list of toast components and their display position and order.

**For Use In**

Lightning Experience, Experience Builder Sites, Salesforce Mobile App

::::::tabset{tabs='[ "Develop", "Specifications"]'}

:::::tab

Use the `lightning/toastContainer` module to manage a list of toast components and their order. Each site page supports a single toast container. You can create toast notifications with [lightning/toast](/docs/platform/lightning-component-reference/guide/lightning-toast.html) and manage them using `lightning/toastContainer`.

This example creates a basic toast container component that handles and displays all the page-level toast messages.

```javascript
const toastContainer = ToastContainer.instance();
```

## Customization

By default, the toast container shows a maximum of 3 toast notifications at the same time. Set the `maxToasts` attribute to change the maximum number of toasts shown at a time.

Toast components display at the top center of the container by default. The most recent toast displays at the top of the container, and the oldest toast notification displays at the bottom. Change the toasts' position in the container with the `toastPosition` attribute.

The container position is fixed to the viewport. Adjust the position of the container relative to its parent element with the `containerPosition` attribute. This attribute has two values.

- `fixed` - positions the container relative to the initial containing block established by the viewport.
- `absolute` - positions the container relative to a positioned parent element.

This example creates a page-level toast container in the top-right in the viewport that shows a maximum of 5 toast messages at one time.

```javascript
// c/myApp.js
import { LightningElement } from "lwc";
import ToastContainer from "lightning/toastContainer";

export default class MyApp extends LightningElement {
  connectedCallback() {
    const toastContainer = ToastContainer.instance();
    toastContainer.maxToasts = 5;
    toastContainer.toastPosition = "top-right";
  }
}
```

## Accessibility

Toast container follows the SLDS [Global Focus Orchestration](https://v1.lightningdesignsystem.com/accessibility/guidelines/global-focus/#global-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.


:::::

:::::tab
::component-specification{component="toastContainer" model="lwc" namespace="lightning"}

:::::

::::::