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.

Import

Use

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

Head's up! Some useful information appears here.

Colors

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

  • Props
  • Styled Functions
PropTypeDefaultDescription
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.

onDismissfunction

What to do if the user clicks the dismiss button.

hideIconbooleanfalse

Set to `true` to hide the icon.

bgstringextended.reds.R020

Background color of the bar.

colorstringblack

Color of the text

iconColorstring

Color of the icon

iconReactNode

Icon to display in the component.

borderRadiusstringsmall

Border radius of color of the bar.

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