Component size, gzipped: 16kb

Toast

Loading
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.

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
  • When a notification is set to be dismissed automatically after a provided autoHideDuration time hovering or focusing the notification will prevent the notification from disappearing and reset the timeout to the initial autoHideDuration value

Examples

Toast Notification Basic Usage

API

Toast props

autoHideDuration
number
The number of milliseconds to wait before automatically dismissing a notification. This behavior is disabled when the value is set to 0.
children
react node
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
custom
Lets you customize all aspects of the component.
placement
enum
Defines notifications placement.
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: