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.
- 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
Dos and Don’ts
- 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 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
Variants - State
Variants - Screen Size
- 100% width
- No icon
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.
|Informational||Show admin-related status|
|Warning||Warn user of sub-optimal experience|
|Error||Tell user that the system will not run properly|
|Offline||Show offline state|
|Informational||Inform user of an upcoming maintenance|
|Error||Inform that the input is not a valid value.|
Refer to this code sample for the banner markup.
|Slide down duration||0.4 seconds|