Nielsen Design System

Banner

Last Updated on Sep 29, 2022

A banner displays a prominent, persistent message usually related to an error or warning action a user made.

View Figma Component

View MAF Storybook

Component Variants

In Progress

Design Principles

Banners appear at the top of the current active content area. This could be just below the global navigation or at the top of a modal.
Banners appear until dismissed or the user leaves the screen.
Optionally, banners can show a button to trigger an action related to the banner.
Banners can be error, warning, or neutral.
A banner’s content should be written in complete sentences.

Do's and Don'ts

Use language is descriptive and identifies how to resolve the issue. If an issue is ours, admit the problem is ours by using the second person speech.

Place banners in an obvious place. Usually this will be at the top of the page or modal. Placing banners in a container near an issue is also acceptable if it makes fixing the issue easier.

Use banners and error text in inputs and selects to help users find issues in their submissions.

Error banners are not as severe as error dialogs. If you have a major error, use a dialog instead of a banner.

Don’t use generic language like “We have a problem.” Be more specific.

Don’t use a banner if the event was triggered by the system. Use a notification for system triggered events. Banners are for user triggered events.

Table of Contents

Component Variants Design Principles Do's and Don'ts

Related Components

Dialog

Toast