use UI

Alert Banner

Also called banner, inline alert, callout, message bar, notice

A persistent message placed in the page flow, describing a condition that remains true until something changes it.

Example

The first banner has no dismiss button on purpose — the condition is still true, so hiding it would only hide the problem. The second is informational and dismissible, which is the point at which you need to remember the dismissal.

When to use it

  • A condition persists: payment failed, trial ending, service degraded, unsaved changes.
  • The user must be able to re-read it. Anything containing an account number, a deadline or an instruction belongs here.
  • There is an action attached, and the user should be able to reach it whenever they are ready.
  • The message is tied to a place — a form, a section, a settings page — and belongs next to what it describes.

When not to

  • Confirming a completed action. “Saved” does not deserve permanent space; that is a toast.
  • It appears on every page load. Banner blindness is real, and a banner that is always there stops being read within a week.
  • Stacking several. Three banners above the content push the actual page below the fold and none of them get read.
  • The message is about one field. Inline validation next to that field is more useful and easier to act on.

Trade-offs

  • Cannot be missed by being slow — it stays until dismissed or resolved.
  • Holds enough room for context, links and a real action.
  • Sits in the layout, so it is present in screenshots and survives a reload.
  • Takes vertical space at the top of the content, which is the most valuable space on the page.
  • Goes unread when overused — the classic cookie-banner effect.
  • Dismissal needs a memory, or the same message reappears on every visit and trains people to ignore it.

Accessibility

What this pattern needs in order to work for everyone.

Keyboard
  • A dismiss button must be reachable and clearly labelled — “Dismiss” beats a bare ×.
  • Actions inside the banner belong in the natural tab order, near the start of the content they refer to.
Roles and state
  • Use `role="alert"` only for something urgent appearing dynamically — it interrupts the screen reader immediately.
  • For a banner that is present when the page loads, no live region role is needed; it is simply content and gets read in order.
  • For a non-urgent banner that appears later, `role="status"` announces it without cutting in.
Focus
Do not move focus to a banner on load — it drops the user out of whatever they were doing. If the banner reports a failed submission, moving focus to it is the exception, because the user is already waiting for that answer.

In the wild

  • Stripe Dashboard — Account and payout problems appear as banners because they stay true until resolved.
  • GitHub — Repository-level notices sit inline above the file list, tied to the thing they describe.

Compared with

Side-by-side breakdowns of patterns that solve a similar problem.