Toast

A terse notification that will only be displayed for a short period of time, overlaying whatever the user is currently doing.

The caller is responsible for determining when to show a Toast. The toast should not be distracting or disturbing the user. To accomplish this, don't show a toast for every task state (i.e. Creating, Processing, Completed, etc). Instead, only show a toast at the end state (i.e. when a task has been completed). Don't show a toast on a task that can be completed quickly. Instead, reserve toast for tasks that may take long periods of time to completely process. Grommet also recommends to incorporate user settings in the app to allow the enable or disable of certain preferences of these toasts. (i.e. Allow the user to choose 'only show me alerts' or 'only show me tasks that complete with errors', etc.

Properties

onClose {function}
Called when the user clicks on the close control or the Toast is automatically closed after a while.
size small|medium|large
The size of the Header. Defaults to medium.
status critical|warning|ok|disabled|unknown
Which status to indicate.

Usage

import Toast from 'grommet/components/Toast';

<Toast status='ok'
  onClose={...}>
  A short message to let the user know something.
</Toast>