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.

Use toasts for displaying short-lived notifications or messages to the user.

Import

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

Use cases

The ToastContainer has to be added to your App.tsx as 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 different types, all of which differ in appearance, lifespan and role:

• info: lifespan of 8 seconds, ARIA role status (default type)
• success: lifespan of 8 seconds, ARIA role status
• warning: does not close automatically, ARIA role status
• critical: does not close automatically, ARIA role alert

However, the ARIA role and the lifespan can also be configured regardless of the type.

CodeSandbox

Configure the role

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

CodeSandbox

Configure the lifespan

Use the lifespan option to either define a time limit in milliseconds or set it to infinite to display the toast until it is closed by the user. From an accessibility perspective automatic time limits can be problematic, therefore do not limit the lifespan for toasts that contain critical information.

CodeSandbox

Configure the position

Use the position option to configure the placement of the Toast component. By default, toasts are positioned at the 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. The maximum number of toasts displayed on the screen is 5. All toasts that come after the 5th toasts will be queued and will show up as soon as some of the 5 active toasts are closed.

CodeSandbox

Add an actions element inside the Toast

The actions option allows you to pass custom actions to the Toast, which will be appended at the bottom. It is recommended to only use a Button or a 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

Props

ToastOptions

extends,

Name	Type	Default	Description
id?	|	-	A unique id for the toast. Using this toast id consumer can control the behavior of individual toast notifications. Toast messages with same id will only be shown once.
title		-	Title displayed in the toast notification.
type?	| | |	'info'	Type of the notification. Also indicates the color and icon.
message?	| .	-	Message displayed in the toast notification.
lifespan?	|	info and success: 8000, critical and warning: 'infinite'	The Toast notification will automatically close after a certain period of time given in milliseconds. If 'infinite' is provided, the consumer will need to manually close the toast.
actions?	.	-	Optional actions passed to the toast element, appended on the bottom left. Should only be used to either add a Button or a Link.
role?	| |	info, success and warning: 'status', critical: 'alert'	Live region roles
position?		'bottom-left'	Position of toast