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.
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 rolestatus
(default type)success
: lifespan of 8 seconds, ARIA rolestatus
warning
: does not close automatically, ARIA rolestatus
critical
: does not close automatically, ARIA rolealert
However, the ARIA role and the lifespan can also be configured regardless of the
type
.
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.
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.
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
.
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
.
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.
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.
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.