Notification

Represents a highlighted message that calls out important information.

Don't confuse notifications with live, event-driven Toaster messages, which show up as feedback about an action triggered by an user and float above the view to disappear after a few seconds. Notifications are typically not user-initiated and provide contextual static information.

Import#

import { Notification } from '@volue/wave-react';

// you may also access Notification context via hook:
// import { useNotificationContext } from '@volue/wave-react';

Notification is a compound component that consists of multiple parts:

Notification: The wrapper that contains all the parts of a notification.
Notification.Actions: A wrapper for action(s) related to notification.
Notification.DismissButton: The button responsible for dismissing the notification.

Examples#

Sizes#

Notification comes in two sizes: medium and small. By default, it uses medium size.

Types#

There are four types of notifications, each with their own styles: info, warning, error, and success. By default, a notification will be of info type.

Notification always displays an icon appropriate to its type.

Place Notification in close proximity to whatever content area or feature it's referring to.

Emphasis#

Notification supports two emphasis styles: subtle (default) and bold. Bold emphasis notifications provide additional visual distinction in the form of a colored outline and are handy for reinforcing the severity or importance of a message.

Notifications should be used thoughtfully and occasionally. They are meant to highlight important information and will be drowned out if used too frequently within a single view.

With list#

Notifications can have lists of information within them, and are useful for providing error summaries when there are many errors on the page or in a long or complex form. When creating an error summary, still include inline error messaging using the Form Field's feedback message.

Action#

Notification supports rendering inline, contextual action to take. You can pass a single action component as children to Notification.Actions. The action content will be displayed on the end side of the notification, except when screen size is small in which case the layout will stack vertically to better accommodate all the content.

Action provides an opportunity for the user to act on the information they see in the notification or navigate them to a view or flow related to the notification itself.

Be short and concise: limit content to 1 or 2 sentences when including an inline action.

Dismissible#

Notification is persistent by default, but can be configured to be dismissible (unless it's critical for a user to read or interact with it) via an icon-only dismiss button.

Notification does not dismiss automatically unlike temporary Toaster messages. It persists until the user explicitly dismisses it or takes action that resolves the notification.

Layout direction#

Notification supports switching layout direction to vertical with layout property. It can come handy when a message longer than two lines is required and/or you want to include multiple action elements.

Notification automatically adds a standard gap between the passed action elements.

Inside list#

Use the headless prop to remove notification outline styles. This is useful in case you need to display multiple notifications in a list, for example as part of "notification center" feature.

Accessibility features#

Notification automatically assigns correct ARIA role and gets announced by screen readers when it gets rendered on the screen.

Error and warning notifications have a role=”alert”. With this role the screen reader will promptly interrupt any ongoing content reading and prioritize the notification content for immediate attention.
All other notifications have a role=”status”. With this role, the screen readers must finish what it started reading before the content of notification is read out.

API Reference#

Notification#

Prop	Type	Default
`css`	`StitchesCss`	No default value
`size`	`enum`	`"medium"`
`type`	`enum`	`"info"`
`emphasis`	`enum`	`"subtle"`
`layout`	`enum`	`"horizontal"`
`headless`	`boolean`	`false`
`addRole`	`boolean`	`true`

Notification.Actions#

In addition to the props below, you can pass Flex props to control the layout.

Prop	Type	Default
`css`	`StitchesCss`	No default value

Notification.DismissButton#

Prop	Type	Default
`css`	`StitchesCss`	No default value
`label`*	`string`	No default value