Banner
Messages that indicate the global status of an application or website.
Banners provide global or system-level messages on the status of an application or site. They provide updates from low to critical priority and often include a follow-up action for the user.
Also known as: Status alert, global status message, informational notice, site notice.
Anatomy
A. Icon (required): Visual indicator communicating the urgency of the banner.
B. Title (optional): Brief text summarizing the purpose of the banner.
C. Message (required): Descriptive message detailing important contextual information.
D. Close icon button (optional): Optional action allowing users to dismiss a banner without completing a call to action.
E. Button and link (optional): Text button or link that prompts an action or directs users to relevant resources.
Usage
| Component | When to use | When not to use |
|---|---|---|
| Informational | For system-level feedback or status messages that require the user’s attention without disrupting their workflow or requiring immediate action. | For informational messages that are of high enough priority to disrupt the user’s workflow, even though they may not require immediate action. Use a Dialog instead. For low-priority status updates contextually relevant to the user’s current workflow. Use a Section message instead. For low-priority messages that don’t require user action or attention. Use a Flag instead. |
| Success | Success banners are not a common use case as they require more attention than needed for low-priority messages. | For system- or section-level success, messages including on-page event confirmations. Use a Flag instead. If the user is taken to a success page on submit. Don’t a messaging component in this case. |
| Warning | For medium-priority warning messages that require the user’s attention and may or may not require action immediately or in the near future. | For medium-priority messages that are of high enough priority to disrupt the user’s workflow. Use a Dialog instead. For warnings contextually relevant to a section of a page or workflow. Use a Section message instead. For low-priority warnings that don’t require user action or attention. Use a Flag instead. |
| Error | For high-priority, system-level messages alerting that errors or issues have occurred that require immediate action or attention. | For high-priority alerts communicating that critical errors have occurred and must be fixed before continuing. Use a Dialog instead. For high-priority errors contextually relevant to a section of a page or workflow. Use a Section message instead. |
Best practices
- Visit Button to learn about best practices for alignment, order, and language for calls to action.
- Visit Feedback and status to learn how to use messaging components, understand their level of disruption, and choose the appropriate messaging component for your context.
Do Fix banners at the top of the screen below the navigation bar.
Don't Place banners anywhere else on the page.
Do Extend banners across margins to enhance visibility and maintain consistent layout flow.
Don't Fit banners within the page layout to, as this may reduce visibility.
Behaviors
Dismissal
In general, users should be allowed to dismiss banners using a close icon button or text button. Banners should also dismiss when users complete an associated action, such as correcting an error. Avoid using timed auto-dismissal for banners, as they may disappear before screen readers finish announcing the text.
Do Use either a close button or a close icon button, and implement them consistently across your experience.
Don't Combine close buttons with close icons or alternate between them in your experience.
Do Omit a close button or icon for critical banners that require immediate action, but do so sparingly.
Don't Omit close buttons unless there’s a clear action the user can take to resolve the issue.
Do Display one banner at a time.
Don't Stack multiple banners, as they may overwhelm users.
Display methods
There are two primary methods for displaying banners: Scrolling with page content (recommended) or floating over page content. Floating banners are more disruptive and should only be used for high-priority messages.
Scrolls with page (recommended)
Banners that scroll with page content are fixed below the navigation bar and remain there as users scroll. This is the least disruptive way to implement banners.
- Place these banners within page content below the navigation bar.
- Use these banners for low and medium-priority messages without disrupting the flow of content.
Floats above page content
Floating banners float over page content. They remain in view when users scroll but may obstruct important interactive controls.
- Reserve floating banners for high-priority messages that require immediate attention.
- Always float banners on mobile screens for accessibility reasons. Visit Platform considerations for more info.
Animation
Banners may use animated graphics. When animated, banners appear by sliding downwards from the top of the page and reverse when dismissed.
- Ensure animations are brief, subtle, and unobtrusive.
- Use animations consistently for all banners in your experience.
Content
- Learn how to craft content for messaging components, like banners, visit Messaging.
- Follow guidelines for Link and Button components when labeling actions and destinations within banners.
Platform considerations
Mobile
Banners are available in both web and mobile and should be implemented similarly across platforms.
- Always float banners on mobile screens. This ensures they remain visible if users zoom or navigate non-linearly.
Do Use buttons or links to dismiss banners.
Don't Only use a close icon in mobile banners.
