Edit this page
[?] Component size, gzipped: 28kb

Toast

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

Toaster Basic Usage

Toast Notification Basic Usage

Overrides

Additionally, you can fully customize any part of the Toast through the overrides prop. The Toast consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

API

Toaster API

Toast API

autoHideDuration number = 0

The number of milliseconds to wait before automatically dismissing a notification. This behavior is disabled when the value is set to 0.

children union required

Toast notification content. The children-as-function receives a dismiss method that can be called to dismiss the notification and can be used as a handler for an action inside the toast content.

One of
ChildrenArrayNode,
dismiss function required () => undefined
 => Node

closeable boolean = true

When set to true a close button is displayed and the notification can be dismissed by a user.

kind $Values<typeof KIND> =

Defines the type of notification.

$ValuesObject.freeze({ info: "info", positive: "positive", warning: "warning", negative: "negative" })

notificationType $Values<typeof TYPE> =

$ValuesObject.freeze({ inline: "inline", toast: "toast" })

onClose function = () => undefined

A callback function called when a notification is dismissed.

() => mixed

onBlur function = () => undefined

Event => mixed

onFocus function = () => undefined

Event => mixed

onMouseEnter function = () => undefined

Event => mixed

onMouseLeave function = () => undefined

Event => mixed

"data-baseweb" string

overrides object = {}

Body { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
$color string
$size union One of
number,
string
$kind required $ValuesObject.freeze({ info: "info", positive: "positive", warning: "warning", negative: "negative" })
$type required $ValuesObject.freeze({ inline: "inline", toast: "toast" })
$closeable boolean required
$isRendered boolean required
$isVisible boolean required
CloseIcon { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
$color string
$size union One of
number,
string
$kind required $ValuesObject.freeze({ info: "info", positive: "positive", warning: "warning", negative: "negative" })
$type required $ValuesObject.freeze({ inline: "inline", toast: "toast" })
$closeable boolean required
$isRendered boolean required
$isVisible boolean required
InnerContainer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
$color string
$size union One of
number,
string
$kind required $ValuesObject.freeze({ info: "info", positive: "positive", warning: "warning", negative: "negative" })
$type required $ValuesObject.freeze({ inline: "inline", toast: "toast" })
$closeable boolean required
$isRendered boolean required
$isVisible boolean required

key Key required

Key

Toast exports

You can import this module like so:

import {toaster} from 'baseui/toast'

It exports the following components or utility functions:

  • toaster
  • ToasterContainer
  • Toast
  • KIND
  • PLACEMENT
  • TYPE
  • StyledRoot
  • StyledBody
  • StyledCloseIcon