Banner Banners convey the most important feedback from the application.

Usage guidelines

When to use

• Use banners when you need to inform the person using the app of something immediately. This usually means that some important process has finished, some important process has failed, or that something has otherwise gone very wrong.
• Banners often involve a call to action. The call to action can consist of several related actions.

How to use

• Use icons only when they reinforce the messaging. Do not solely rely on an icon in a banner to convey the message.
• Because banners are intended to communicate only the most important information, active banners should appear on every size of device and window, at the top of every screen, and in front of everything else. If you are considering ignoring the last sentence, that's probably a good sign that you should consider using something other than a banner to convey that information.
• If you end up needing to render multiple banners at once, banners are designed to be vertically stacked without space in between different banners.

Development

• The banner text must be wrapped in a span. Any <a> or <button> elements should be siblings of that span.

<res-banner>
  <span>Message text</span>
  <button>Banner action 1</button>
  <a href="#">Banner action 2</a>
</res-banner>

Content guidelines

General

• Check the wiki for details on banner messages.
• Don’t joke around or use words like “alert” that might up someone’s stress level.
• Don’t punctuate times and don’t mention daylight savings time (e.g., at 10pm ET).

Errors

• Review existing messages before writing new ones.
• If something went wrong, explain how to fix it with a clear call to action or link for support.
  • Example warning for restricted Google Sheets in a table: Please make the Google Sheet public to continue.
• Refer to buttons, labels, and menus as they appear in the app.

Variations

Dismissible / Persistent / Temporary

By default, banners are dismissible: they will appear on the screen until manually closed. They can instead be persistent, so that they cannot be closed at all; or they can be temporary, so that they automatically disappear after a fixed time (five seconds). These traits are mututally exclusive.

Dismissible (Default)

Use a default, dismissible banner when important information needs to be conveyed.

Persistent

Use a persistent banner when important information needs to be conveyed, and they must take immediate action. Situations in which you would want a persistent banner are often also those in which you would want every form field and every form control to be disabled.

Temporary

A temporary banner will automatically disappear after five seconds (and so an example of one cannot be placed below).

Use a temporary banner when important information should be conveyed, but it's not the end of the world if they don't see it, and there are no actions they could take as a result. For example, you might use a timeout banner to inform that a process that has been running in the background for a very long time has completed.

Status

Neutral

The default banner design.

Positive

Use a positive banner to strongly communicate the success of a particular action or process, and especially when the success of that action or process was uncertain in the mind and/or heart of the person using your application. The appearance of a positive banner often coincides with the end of an entire workflow.

Negative

Use a negative banner to signal important error messaging. It signals not just that something has gone wrong, but that something has gone wrong unexpectedly, and potentially with a large cost if not addressed. This should be used sparingly for global errors that require the most immediate attention to resolve.