Banner

A banner is a message the page owns, about the page. It spans the top of a surface, sits in that surface’s own flow rather than floating over it, and it is still there after a scroll, a re-render, and a coffee. The persistence is the term: a message strip that fades out on a timer is a toast that got the geometry wrong, and one that needs the reader to keep reading past it is asking for the wrong shape entirely. What makes it worth the width is that it describes a condition rather than an event: a card about to expire, a service running in degraded mode, an account waiting on verification. The condition ends when the reader deals with it, which is why a banner carries an action, a dismiss, or both.

Five words sit close to it, and one clause separates each. A toast leaves on its own and is about something that just happened. A callout is written into the content at the point where it is relevant, so it belongs to a paragraph rather than to the page, and a dismiss button on one is usually a sign it wanted to be a banner. A hero occupies the same slot and is marketing rather than a message: it sells, it does not report. A status message is defined by being announced rather than by being shown, so a banner can be one and a status message can be a line of text nobody sees move. And a cookie consent banner is one specific banner everyone has met, which is why the general word so often gets used for the specific thing.

Placement has a cost that is easy to miss. A banner at the top of the page pushes everything below it, so a banner that arrives after load moves the content under the reader’s eye, and a banner that reappears on every page view is nagging rather than informing. Reserve its room, or bring it in on a transition the reader can follow, and remember that the dismissal has to persist: a notice the reader has already answered should not come back on the next route change. If the message is genuinely about one section rather than the whole page, put it at the top of that section, which is what Salesforce means by a scoped notification.

Semantics depend on urgency, and the temptation is to over-declare. A banner that is part of the page when it loads needs no live region at all: it is content, and a reader will meet it in the reading order. A banner injected in response to something needs role="status" so it is announced politely, and only a genuine emergency (data about to be lost, a session about to end) earns role="alert", which interrupts whatever the reader was hearing. Note also that role="banner" in ARIA is an entirely different thing, the page’s masthead landmark, and putting it on a message strip is one of the more common mix-ups the word causes.