Component size, gzipped: 19kb



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.


Notification Basic Usage

Notification with all Available Kinds

Notification Closeable example

Notification in Full width

Notification with Overrides

Notification with Custom Dismiss


Notification props

Notification exports

You can import this module like so:

import {Notification} from 'baseui/notification'

It exports the following components or utility functions:

  • Notification
  • KIND