Open menu

Preview the notification component with the React live demo. For detailed code usage documentation, see the Storybooks for each framework below.

Documentation

Feature flags

A feature flag has been added to the actionable notification variant to improve accessibility and changes parts of its functionality, not its visual appearance. For more code-specific feature flag information, refer to the @carbon/react framework.

The

enable-experimental-focus-wrap-without-sentinels

flag is a new approach to focus wrap behavior, modifying the DOM to no longer include hidden “sentinel nodes” that previously marked the beginning and end of the wrapped focus. This behavior considers all interactive child nodes and wraps focus based on their tab order.

Live demo

Theme selector

Variant selector

This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.

Edit this page on GitHub

Notification: Style

Notification: Accessibility

Notification

Documentation

React

Web Components

Angular (Community)

Vue (Community)

Feature flags

Live demo