Guidelines

Banners

Banner communicates a state that affects the entire system, not just a feature or page. It persists over a session and appear without user initiating the action.

Note: Banners are part of system messaging and are handled internally by Salesforce. Partners building apps that appear within Salesforce shouldn’t use banners.

Usage

  • Visual: Visible
  • Voice & Tone: Informational
  • Motion: Delicate
  • Duration: Permanent
  • Audio: Muted

A banner persists over a session and appears without user initiating the action. It communicates system-level messages that are relevant to the user regardless of their place in the application.

A banner can show one of the following states:

  • Error: to tell the user that they cannot proceed with their Salesforce experience, e.g. due to an outdated browser.
  • Informational: to show admin-related status (e.g. logged in as a user), system maintenance, etc.
  • Offline: to inform the user that they are in offline mode.
  • Warning: to warn the user of potential issues with their Salesforce experience, e.g. due to an outdated browser.

Banners appear as soon as the user logs in as a full-width strip above the global header. They persist while a user is logged in, and are generally not dismissible. Banners are dismissible only if they communicate future impact to the system, but has no bearing on the system at the moment, e.g. notifying users of scheduled maintenance.

Banner in Context

Banner in Context (Mobile)
Banner in Context (Desktop)

Dos and Don’ts

Do

  • Do use banners sparingly.
  • Do keep the UI text short. If needed, include a link to let the user take an action or read the message in more details.

Do Not

  • Do not use banners as a feedback mechanism. Look into inline text, popover, toast, or modal instead.
  • Do not make banners dismissible if the message remains relevant to the user while they are logged in.

Variants - Component

Dismissible
Not Dismissible

Variants - State

Error
Informational
Offline
Warning

Variants - Screen Size

Mobile
  • 100% width
  • No icon

UI Text

UI text can vary greatly case to case, depending on the context. The guidelines below serve as examples, but you are not limited to them.

StateIntentExample
InformationalShow admin-related status
Logged in as John Smith (johnsmith@acme.com). Log out
WarningWarn user of sub-optimal experience
Your browser is outdated. Your Salesforce experience may be degraded. More information
ErrorTell user that the system will not run properly
Your browser is not supported. Your app will not run. More information
OfflineShow offline state
You are in offline mode. More information
InformationalInform user of an upcoming maintenance
Scheduled Maintenance Notification: Sunday March 15, 8:00 AM–10:00 PST. More information
ErrorInform that the input is not a valid value.
Email is not in the right format (joesmith@example.com).

Recommended Specs

Refer to this code sample for the banner markup.

DescriptionTokenValue
Slide down duration$duration-slowly0.4 seconds