Toaster
Introduction
The 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 To Use
When you want to give feedback to your users about a action they take. Often this is in the form of creation or deletion.
Implementation details
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:
Types of toasts
- info:
toaster.notify()
- success:
toaster.success()
- warning:
toaster.warning()
- danger:
toaster.danger()
Closing all toasts
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.
Keep around when mouse over
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.
Self managed
The toaster
manages state itself — and uses ReactDOM
to show toasts.
The toaster
is an instance of the Toaster
class.
Notify
Hide code
Success
Hide code
Warning
Hide code
Danger
Hide code
Close all
Hide code
Adding a description
A description
is used as the children of the Alert
component.
The description can be a React node.
Hide code
Toasts with custom duration
It is possible to add a custom duration when showing a toast.
The default duration
is 5
seconds.
The duration
property is in seconds — not milliseconds.
Hide code
Unique toasts
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.
Hide code