Skip to main content

    Toast

    The Toast component provides a way to show live, time-sensitive feedback to users, which includes updates or changes to the system status. To display the Toast component use the ToastContainer along with the showToast function. The function accepts ToastOptions as an argument, allowing you to pass various configurations, and returns the corresponding toast id.

    OverviewPropertiesUsage

    Import​

    import {
      ToastContainer,
      ToastOptions,
      dismissAllToasts,
      dismissToast,
      showToast,
    } from '@dynatrace/strato-components-preview/notifications';

    Use cases​

    Add ToastContainer to your App.tsx to make it available everywhere. All toasts will be rendered into this container. Only a single ToastContainer is rendered at a time, even if multiple containers are provided.

    CodeSandbox

    Configure the Toast type​

    The Toast type can be configured by setting the type prop in the ToastOptions. There are four types, each with a different purpose, appearance, and lifespan:

    • info: Closes automatically after 8 seconds; ARIA role status (default type)
    • success: Closes automatically after 8 seconds; ARIA role status
    • warning: The user must close it; ARIA role status
    • critical: The user must close it; ARIA role alert

    The lifespan and ARIA role can be configured regardless of type.

    CodeSandbox

    Configure the lifespan​

    Use the lifespan option to define a time limit in milliseconds or set it to infinite to display the toast until closed by the user. From an accessibility perspective, automatic time limits can be problematic. Therefore don't limit the lifespan of toasts that contain critical information.

    CodeSandbox

    Configure the role​

    Use the role option to configure the ARIA role set on the toast's body. The available roles are status, log and alert. Please ensure that the correct role attribute is assigned, as it is crucial for proper accessibility handling.

    CodeSandbox

    Configure the position​

    Use the position option to configure the placement of the Toast component. By default, toasts are positioned at bottom-left, but this can be changed to bottom-center or bottom-right.

    CodeSandbox

    Custom ID for the Toast​

    You can configure a unique id for the Toast. Using the id option, you can control the behavior of individual toast notifications. Also, by assigning a unique id to a toast, you can prevent duplicate messages from being shown with the same toast id.

    CodeSandbox

    Multiple toasts​

    You can display multiple toasts simultaneously. A maximum of five toasts can be displayed on the page at once. Additional toasts will be queued and appear when one of the first five toasts is closed.

    CodeSandbox

    Add actions inside the toast​

    The actions option allows you to pass custom actions to the Toast. The actions will be appended at the bottom. Only use a Button or Link as an action element.

    CodeSandbox

    Dismiss toasts programmatically​

    Use the dismissToast and dismissAllToasts functions to close toasts programmatically. To close a single toast with the dismissToast function, simply pass the ID returned by the showToast function as an argument.

    CodeSandbox
    Still have questions?
    Find answers in the Dynatrace Community