Banner
A banner is a prominent message bar that typically appears at the top (or sometimes bottom) of a page or section. It conveys important information or announcements that users should notice immediately—such as warnings, system updates, promotional messages, or cookie consent. Banners can be dismissible or fixed, and they often span the full width of the containing area to grab attention.
Usage
High Priority Announcements: Banners ensure crucial messages are seen by users without requiring them to open a separate dialog.
Persistent or Dismissible: Depending on the context, a banner can stay visible until dismissed (user clicks “X”) or until a certain condition is met (e.g., cookie policy accepted).
Minimal Disruption: While banners are attention-grabbing, they don’t completely block user interaction with the rest of the page (unlike a modal).
Use cases
Promotional: Showcases a sale, discount code, or new feature rollout
Warning: Alerts users about a critical system issue, server maintenance, or limited functionality
Informational: Displays a general notice, like upcoming changes or cookie usage policy
Not to be confused with
Modal/Dialog: Banners don’t block the main content and allow users to continue interacting with the page. A modal demands user attention and action before returning to the main flow.
Toast: Toasts often appear briefly and auto-dismiss; banners usually remain until explicitly dismissed or the condition is resolved.
Best practices
Prioritize Legibility
Use clear, concise text and ensure sufficient contrast between the banner background and text color.
Keep the message short, with an optional link for more details if needed.
Use Color for Context
Match the banner’s color to the nature of the message (e.g., red/orange for warnings, blue/gray for information, green for success/promotion).
Make sure it aligns with your design system’s alert or status color palette.
Decide on Dismissal Behavior
If the banner is critical, consider keeping it until the user clicks “Dismiss” or acts upon it (e.g., “Accept” for cookies).
For less urgent messages, an auto-dismiss or session-based display might suffice.
Maintain Responsive Layout
Ensure the banner scales or collapses properly on smaller screens.
Consider allowing users to swipe or tap to dismiss on mobile devices.
Accessibility
If the banner is crucial, ensure it is announced to screen readers (e.g., using role="alert" or aria-live region).
Provide a visible and accessible close button or link, clearly labeled (e.g., “Dismiss banner”).
Limit the Number of Banners
Multiple stacked banners can overwhelm users; combine related messages into a single banner if possible.
If you must display several banners, prioritize or sequence them carefully.
Consistency
Keep banner styling uniform (font, padding, icon usage) across different messages.
Maintain consistency with other branding and alert components in your design system.
Use banners sparingly and only for content that truly warrants immediate visibility. Overusing banners can desensitize users, leading them to ignore key messages.
Summary
A banner prominently displays high-priority messages or announcements, ensuring they catch the user’s attention without fully blocking the interface. By using clear messaging, appropriate color coding, and a straightforward dismissal process, banners can effectively inform users about important updates, promotions, or warnings. Balancing visibility with user experience—particularly regarding frequency and accessibility—helps banners serve as a valuable communication tool in your design system.
