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

Notification

Notifications provide important information inline with the content body within a view. These notifications do not self-dismiss and have the option to include a close “X”.

When to use

  • When another user of the app direct messages the current user.
  • When the app requires immediate action by the current user.
  • When the app must communicate actionable information from outside the current context.

Examples

Notification Basic Usage

Notification with all Available Kinds

Notification Closeable example

Notification in Full width

Notification with Overrides

Notification with Custom Dismiss

Overrides

Additionally, you can fully customize any part of the Notification through the overrides prop. The Notification 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

Notification API

autoHideDuration number required

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 = false

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

kind $Values<typeof KIND> required

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 required

A callback function called when a notification is dismissed.

() => mixed

onBlur function required

Event => mixed

onFocus function required

Event => mixed

onMouseEnter function required

Event => mixed

onMouseLeave function required

Event => mixed

"data-baseweb" string

overrides object required

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

Notification exports

You can import this module like so:

import {toaster} from 'baseui/notification'

It exports the following components or utility functions:

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