Toast

The Toast component provides a way to communicate with the user. It is used to show live, time-sensitive feedback to users, which includes updates or changes to the system status. Every single toast can be configured by passing specific ToastOptions to it. By default, all toasts are displayed at the bottom left of the screen.

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

To display the Toast component you need to import a function called showToast. The function accepts ToastOptions as an argument, allowing you to configure the toast, and returns the corresponding toast id.

Default Toast

The default Toast is of type info. It's automatically closed after 8 seconds and is of ARIA role status.

CodeSandbox

Configure Toast type

There are four different types of toast notifications, all of which differ in appearance and lifespan. Toasts of type info and success have a default lifespan of 8 seconds, whereas toasts of type warning and critical do not close automatically.

CodeSandbox

Configure lifespan

You can configure the lifespan of every toast regardless of its type. 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

Custom Id for toast

You can configure a unique id for the toast. Using this toast id prop 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 the actions element inside the Toast

The toast can contain also the actions element like a button or link.

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?	|	-	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. Default value by type: info: 8000ms critical and warning: 'infinite'
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?	| |	-	Live region roles * Default value by type: info and warning: 'status' critical: 'alert'
position?		'bottom-left'	Position of toast