Skip to content
search icon
clear
Component Status

Notification banner

Banners display important notifications and related optional actions.

Guidelines

Notification banners should communicate a change or error. Banners are always at the top of the page but below the Top bar. Banners require an action in order to be dismissed. Banners deliver medium priority information---while Snackbars deliver low priority and Dialogs delivery high priority information. Banners are meant to be slightly interruptive but not overly distracting. Banners can be fixed or scroll away with content.

Banners are also known as Top bar or Alerts.

Don't

  • Do not put a banner above the top bar.
  • Do not use more than one banner at a time.
  • Do not include links in the text.

Variations

The Text or Text + icon with the optional Actions combined are to fill 100% of the width of the main content area. They are not to go over open Navigation drawers or fixed sidesheets but beside them.

FigmaExternal linkFigma design sketches of notification banner

Text

Banners should have a single message with specific actions (optional) related to that message. Banner messages should be written as full sentences with punctuation.

Text + icon

To help weight the banner more on the screen a supporting icon can be added. Choose an icon from the System Icons that helps strengthen your message.

Actions

Actions are optional. Actions should always be related to the message. Banners can have up to two actions. Action labels should be short and text only.

If the screen is not wide enough, place the actions below the message on their own line. (In Figma, remember to turn off the Text layers bottom border.)

Demo

MDX doesn't support object destructuring, so this examples uses dot notation

Text

This tag is not being preserved yet. Click start preservation to enable writing preservation records.

Icon + Text

We are in the making of a new design for this page.


Some warning information.


Text + Action

You are signed on with another account than Equinor account: name.lastname@mail.com.


You are signed on with another account than Equinor account: name.lastname@mail.com. This means you have to do something to be able to use this service.


Icon + Text + Action

This tag is not being preserved yet. Click start preservation to enable writing preservation records.


I'm such a really really long message about some sad saving news that there is not enough space for the actions on my left. That's why the actions have been located at the bottom using the placement prop instead.


Edit this page on GitHub