Bain Logo

Notification Bar

Jump to Props

Deliver important information to the user in a visual way

Think of the Notification Bar like an 'alert'. The type of information contained in the component will help you to decide which style to use.



Use the NotificationBar to convey useful, unexpected information to the user.

Head's up! Some useful information appears here.


Use the variant prop to choose from the main types of NotificationBar. In most cases, this is all you should need to do to customise the style of the component.

Head's up! We've saved your changes.
Performing this action will lose your changes.
There seems to be an error in performing this action.
Changes saved
Head's up! We've saved your changes.

Custom background, color and icon

You can choose the background (bg), text (color) and icon (iconColor) colors.

Shiny custom one

Dismissing a Notification Bar

Pass the onDismiss handler to the component. Here's an example implementation.

Once you've read me, you can dismiss me.


  • Props
  • Styled Functions
variantinfo | error | warning | success | neutralinfo

Set the type of notification.

contentstring | node

Message to display in the notification bar. To include links, wrap the content in a fragment.


What to do if the user clicks the dismiss button.


Set to `true` to hide the icon.


Background color of the bar.


Color of the text


Color of the icon


Icon to display in the component.


Border radius of color of the bar.

© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy