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