Anatomy
- Icon: Let the user quickly gauge what type of alert it is
- Message: Provides detail and actionable steps for the user to take.
- Button or Link: (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
Task-generated messages
Task-generated messages are initiated in response to user action during a specific task. They give users direct, immediate feedback. They should be related to the user’s action.
You might send a task-generated message when:
- A form is successfully submitted
- There is a problem uploading a file
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
When not to use this component
Only use banners where necessary. Confine each notification to the portion of the interface and workflow it is relevant to.
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 use banners for temporary messages. Use Toast instead.
- Don’t automatically dismiss the banner with a timeout. If you need a temporary message use Toast instead.
Best Practices
- Use banners to communicate in a prominent way 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 use banners for promotional messages or to explain features in the user interface.
- Don’t make banners scroll with the user. Banners should be static.
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.
Dismissing the banner
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.
Responsive Behavior
Banners should be responsive based on the width of the browser following the guidance below.
- The message body will fill the container based on how much space is permitted after padding and CTA widths are accounted for.
- The text within the message body should wrap as the browser width is reduced.
- Once the message body text box reaches a minimum width of 215 px the CTAs should wrap to a subsequent line below the message body.
Variants
The banners use semantic status colors to communicate the banner's intent to the user.
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.
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.
- When possible, communicate the main message using just the title.
- Use a period only if the title is a full sentence.
- It is advisable to not exceed 50 characters
Body Content
- Be concise and avoid repeating or paraphrasing the title.
- Limit content to one or two short sentences.
- 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.
- It is advisable to not exceed 250 characters
Banners with action
- Button labels should be precise. Try to limit action labels to two words or less.
- 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. This can be either a page with more details or a dialog.
For further information, see the Content Styleguide.
Known Gaps
- Adding additional banner sizes, such as compact.
- Accessibility and keyboard guidelines