Toast Container

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 and manage them using lightning/toastContainer.

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

1const toastContainer = ToastContainer.instance();

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.

1// c/myApp.js
2import { LightningElement } from "lwc";
3import ToastContainer from "lightning/toastContainer";
4
5export default class MyApp extends LightningElement {
6  connectedCallback() {
7    const toastContainer = ToastContainer.instance();
8    toastContainer.maxToasts = 5;
9    toastContainer.toastPosition = "top-right";
10  }
11}

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.