Component size, gzipped: 19kb

Notification

API

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

API

Notification 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
function
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. React.ChildrenArray type is also accepted.
closeable
boolean
When set to true a close button is displayed and the notification can be dismissed by a user.
kind
enum
Defines the type of notification.
onBlur
function
Called the onBlur event triggers.
onClose
function
A callback function called when a notification is dismissed.
onFocus
function
Called the onFocus event triggers.
onMouseEnter
function
Called when mouseEnter triggers.
onMouseLeave
function
Called when mouseLeave triggers.
overrides
custom
Lets you customize all aspects of the component.

Notification exports

You can import this module like so:

import {Notification} from 'baseui/notification'

It exports the following components or utility functions:

  • Notification
  • KIND