The Toaster component is used to show an ephemeral message as an overlay.
toaster is used to show toasts (alerts) on top of an overlay.
The toasts will close themselves when the close button is clicked,
or after a timeout — the default is 5 seconds.
When you want to give feedback to your users about a action they take. Often this is in the form of creation or deletion.
A toast is simply a wrapper around the
Alert component and has the same kind of types as an alert.
The following types are available:
In some situations toasts might become outdated before they expire. For example when showing a toast in a setup flow, canceling out of that setup flow might make the toast irrelevant.
In those situations you can use
toaster.closeAll() to close all open toasts.
When the use hovers (mouse overs) the toast it will stop the countdown timer and the toast will stay alive as long as the toast is being hovered.
toaster manages state itself — and uses
ReactDOM to show toasts.
toaster is an instance of the
description is used as the children of the
The description can be a React node.
It is possible to add a custom duration when showing a toast.
duration property is in seconds — not milliseconds.
There are cases when it's only one toast with the same content can be shown at a time.
Passing a unique ID via
id property allows Evergreen to close all previous toasts with the same ID, before showing a new one.