Notification Bar

A full-width bar for displaying prominent, global messages at the top of the application.

Not to be confused with Notification — an inline, contextual message. Notification Bar is for global, application-wide messages displayed above the header.

Import#

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

Notification Bar is a compound component that consists of multiple parts:

NotificationBar.Root: The wrapper that contains all the parts of a notification bar.
NotificationBar.Content: The content of the notification bar.
NotificationBar.Action: An inline text action related to the notification.
NotificationBar.DismissButton: The button responsible for dismissing the notification bar.

Examples#

Types#

There are three types of notification bars: info, warning, and danger. By default, a notification bar will be of info type.

NotificationBar always displays an icon appropriate to its type.

With action#

NotificationBar.Action lets you add an inline text action to the notification bar, providing the user with an opportunity to act on the information or navigate to a related view.

Dismissible#

NotificationBar can be made dismissible via NotificationBar.DismissButton. It manages its own open state internally by default.

Controlled#

You can easily make the notification bar controlled, by passing your own state to isOpen prop. onIsOpenChange handler is called when the state of the notification bar changes, allowing you to sync state.

Complete#

You can combine all the parts together for a complete notification bar.

Inside App Frame#

NotificationBar is designed to integrate with App Frame and App Frame With Sidebar layout components. Use the AppFrame.NotificationBar (or AppFrameWithSidebar.NotificationBar) slot to position the notification bar at the top of the layout grid, spanning the full width above all other areas.

Visit App Frame docs and App Frame With Sidebar docs for integration examples.

Accessibility features#

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

danger and warning notification bars 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.
info notification bars have a role="status". With this role, the screen reader must finish what it started reading before the content of the notification bar is read out.

API Reference#

NotificationBar.Root#

Prop	Type	Default
`css`	`StitchesCss`	No default value
`type`	`enum`	`"info"`
`isOpen`	`boolean`	No default value
`defaultIsOpen`	`boolean`	No default value
`onIsOpenChange`	`function`	No default value

NotificationBar.Content#

Prop	Type	Default
`as`	`enum`	`p`
`css`	`StitchesCss`	No default value
`overflowStrategy`	`enum`	`"truncate"`

NotificationBar.Action#

Prop	Type	Default
`as`	`enum`	`button`
`css`	`StitchesCss`	No default value

NotificationBar.DismissButton#

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