Design System React

AlphaThis a work in progress. Your input will help us to improve it. Report issues or raise questions on GitHub.

Notification banner

Last updated
19/12/2025
Package version
0.13.0
JSX for this example
<React.Fragment />

Notification banner with icon and close

JSX for this example
<React.Fragment />

Notification banner configuration

NotificationBanner components can use the following props:

className (optional)
A CSS class name to pass to the component.
hasColourIcon (optional)
Makes the icon display in the alternative colour scheme (yellow). Boolean.
hasInverseIcon (optional)
Makes the icon be inverted against a circle background. Boolean.
icon (optional)
Shows the ‘high priority’ icon on the notification banner. Boolean.
isDismissable (optional)
Shows the ‘close’ button on the notification banner. Boolean.
title (optional)
A hidden title for the notification banner, useful for screen reader users. Default is ‘Information’.

Both hasColourIcon and hasInverseIcon can be used together. This combines the effects of both modifiers.

Back to top