Banner
A full-width message at the top of a page or app, for conditions that affect everything below it.
UI ComponentsA banner claims the most valuable strip of the screen, so the bar for using one is whether the message genuinely applies to the entire page: degraded service, a trial ending, an account-wide restriction, scheduled maintenance. Anything narrower belongs next to the thing it concerns as an alert, and anything transient belongs in a toast.
Banners accumulate. Cookie consent, a promotion, a browser warning and an expiring-card notice all ship independently, each justified alone, and together they push the actual product below the fold. The fix is a policy rather than a component: one banner at a time, with an explicit priority order, and a rule that a promotional banner never outranks a functional one.
Layout, not overlay
A banner should push the page down, not float over it. Fixed banners that overlay content break anchor links, hide the first heading, and cover sticky headers. If it must be fixed, the layout has to account for its height.
In practice
A SaaS product ran a cookie bar, a “new pricing” promo and a payment-failure notice at once. On a 13-inch laptop the dashboard started 240px down. Enforcing one banner with a priority order — functional beats promotional — recovered the fold and, incidentally, raised click-through on the promo, because it now appeared alone.
Where teams get it wrong
- More than one banner at a time. Each one was justified on its own and together they own the fold.
- Promotional banners outranking functional ones, so the payment-failure notice is the one that got cut.
- Fixed banners overlaying content and breaking in-page anchors.
- No dismissal and no memory, so the same announcement appears on every page load forever.
- Banner text that states a condition but no action — “Your plan is expiring” with nothing to click.
Learn more
You may ask
Frequently Asked Questions
When should you use a banner instead of an alert?
Use a banner when the condition affects the whole page or account — an outage, an expiring trial, maintenance. Use an alert when it concerns one region or one field, and place it there.
Should banners be dismissible?
Promotional and informational ones, yes, and the dismissal must be remembered. Banners describing an unresolved account problem should stay until the problem is fixed.
How many banners can a page show at once?
One. Ranking them requires a priority order decided once at product level, not per feature — otherwise every team ships the banner they consider most important.
Related terms
All terms- AlertAn in-page message about something needing attention — persistent, placed where it applies, and gone only when the condition is.
- Toast NotificationA brief message that appears over the interface to confirm an action or report a problem, then disappears on its own.
- NavbarThe persistent top bar carrying a product's primary destinations, identity and account controls.
- Status IndicatorA persistent signal of a system or record's current condition — distinct from a message about something that just happened.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us