notification.mdx

import Example from '../../components/example'; import API from '../../components/api'; import Layout from '../../components/layout';

import Basic from 'examples/notification/basic.js'; import Kinds from 'examples/notification/kinds.js'; import Closeable from 'examples/notification/closeable.js'; import Customization from 'examples/notification/overrides.js'; import CustomDismiss from 'examples/notification/custom-dismiss.js'; import FullWidth from 'examples/notification/full-width.js';

import Overrides from '../../components/overrides'; import {Notification} from 'baseui/notification'; import * as NotificationExports from 'baseui/toast';

export default Layout;

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.

<Example title="Notification with all Available Kinds" path="notification/kinds.js"

<Example title="Notification Closeable example" path="notification/closeable.js"

<Example title="Notification in Full width" path="notification/full-width.js"

<Example title="Notification with Overrides" path="notification/overrides.js"

<Example title="Notification with Custom Dismiss" path="notification/custom-dismiss.js"

Overrides

<Overrides name="Notification" component={NotificationExports} blacklisted={['Root']} renderExample={props => ( Default info notification )} />

<API heading="Notification API" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/notification/notification.js')} />