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.
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
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.