Component size, gzipped: 19kb

Toast

API

Toasts can be dismissed and sit on top of a view in various position options - top/right, top/center, top/left, bottom/right, bottom/center, bottom/left. Toasts are intended to provide feedback to a user and self-dismiss after a short time with an option to self-dismiss. Each toast can be colored to fit it’s status type of neutral, positive, warning and alert.

Using the toaster utility:

Toasts can be created easily with some of the helper functions on toaster, as seen in the code sample above. If a key isn't provided, it will auto-generate a unique key for you which will be returned in the instantiation functions (info, positive, warning, negative). If a toast with an identical key already exists, that toast's contents will be updated instead of a new toast being created. The autoHide timeout will reset unless the resetAutoHideTimerOnUpdate prop is set to false on the toaster.

Accessibility

  • Toast notification container element has role="alert" set on it.
  • When multiple alerts are displayed and positioned relative to the browser window they won't overlap but displayed in a column way, latest notifications are displayed at the initial position of a chosen placement.
  • By default, autoHideDuration is set to 0, which means a Toast will remain until dismissed by the user. If possible, try setting an autoHideDuration that makes sense for the content of the Toast. The autoHideDuration countdown will be paused when a user focuses or hovers over the Toast. The countdown will be reset once the user unfocuses or moves their mouse off of the Toast.
  • Do not put important actions in Toasts. If you must put an action in a Toast, do not set an autoHideDuration.
  • You can force focus to the dismiss button when a Toast mounts with the autoFocus prop (on both Toast and Toaster). Use this with caution and keep in mind that screenreaders may read the Toast's content twice (due to the focus shift and alert role).

Examples

Toast Notification Basic Usage

Toaster Using Key To Update Open Toasts

API

Toast props

NameTypeDescription
autoHideDuration
The number of milliseconds to wait before automatically dismissing a notification. This behavior is disabled when the value is set to 0.
children
Additional elements to render in the place where the ToasterContainer is added. When 'usePortal' is set to true only the ToasterContainer is rendered with portal into the body element but not children.
overrides
Lets you customize all aspects of the component.
placement
enum
Defines notifications placement.
resetAutoHideTimerOnUpdate
boolean
If true, the autohide timer on a toast will reset when updated by triggering a toast with the same key
usePortal
boolean
Indicates if 'createPortal' is used to append the toaster container to the body element.

Toast exports

You can import this module like so:

import {toaster} from 'baseui/toast'

It exports the following components or utility functions: