Anatomy
- Icon: Let the user quickly see what type of information it is.
- Header: (Optional) Provides a summary of the message.
- Message: Provides detail and actionable steps for the user to take.
- Button: (Optional) CTA that allows users to address the alert or navigates them to a page with further details.
- Close button: (Optional) Allows users to close the alert.
Usage Guidelines
When to use this component
System-generated messages
These messages are initiated by the application or system, independent of user action. They provide updates on background system status or out-of-context events that have finished.
You might send a system-generated message when:
- A user loses their network connection
- Planned system maintenance is coming soon
- A new report is ready
Feature highlight
When you introduce new features or updates, use Accent banners to bring attention to these additions.
When not to use this component
Only use banners where necessary. Confine each notification to the portion of the interface and workflow to which it is relevant.
Being interrupted creates a frustrating and discouraging experience for users, so this should be limited as much as possible. Additionally, frequent distractions lower productivity and can lead to alert fatigue.
- Don’t automatically dismiss the banner with a timeout.
- If you need a temporary message, use Toast instead.
Best Practices
- Use banners to communicate prominently to the user.
- Provide an action to resolve the issue described by a banner if possible.
- Keep banner messages short and descriptive.
- Avoid displaying more banners than one at a time.
- Don’t make banners scroll with the user. Banners should be static.
- Avoid stretching the banner edge-to-edge in a viewport
General Component Behaviors
Placement
Banners should be placed on top of the section or page they apply to and fill available width of the container.
Placement
- Banners should persist on the page until the user dismisses it or if the state that caused the banner is resolved.
- The close button should always be provided, unless the banner is critical and has to be addressed by the user.
Actionable Banner
If the user needs to take an action based on the banner's contents a link or button can appear.
Variants
Info
Shows information connected to the current task, but does not require any action from the user.
Warning
Informs the user about the unwanted state or the issue that is not critical and doesn’t block the user.
Error
Informs the user about a critical error that has to be addressed to proceed further.
Success
Confirms to the user that the action was completed as expected and might provide further actions helpful to the user.
Accent
Highlights high-priority features, tips or strategic calls-to-action using brand styling to drive user engagement and signal significant platform milestones. Should be used with caution.
Types
Icon
- Icons can be customized for Accent type only.
- Info, Success, Warning, and Error use specific, semantic icons to represent their status and should not be changed.
Permanent banners
- Close button can only be removed for Info, Success, Warning, and Error
- Since Accent banner is used for promoting or announcing certain features, user should always be able to close it
Content Guidelines
Banners provide limited space for content, and therefore the content must be short and concise. A user should be able to quickly scan the alert, be apprised of the situation, and know what to do next.
Title
- The title should be short and descriptive, explaining the most important piece of information.
- Use a period only if the title is a full sentence.
- Use maximum 2 lines of text for the title, it will truncate after
Body Content
- Be concise and avoid repeating or paraphrasing the title.
- Limit content to 3 lines maximum, it will truncate after
- Explain how to resolve the issue by including any troubleshooting actions or next steps. You can include links within the body that redirect the user to the next steps by using an actionable alert.
Banners with action
- Button labels should be precise. Try to limit action labels to two words or less.
Longer Character Count
If a banner requires a message longer than the recommended character count, use an actionable banner and include a short message with a “View more” link that takes the user to a view of the full message.
For further information, see the Content Styleguide.
Known Gaps
- Noa banner
- Default banners or nudges