Designpedia
All terms
Overlays & Surfaces

Banner

also known as notification banner, alert banner

A banner displays an important, non-critical message near the top of the screen (often below the app bar) and stays until the user acts on it or dismisses it. It's non-modal, so users can keep working, and usually offers one or two actions. Banners suit ongoing statuses like 'You're offline' or 'Verify your email'.

See it live — shadcn/ui · MUI · Ant Design
Don't confuse it with
A banner is persistent (stays until resolved) and non-modal; toasts and snackbars are transient and auto-dismiss. A banner sits at the top of the whole screen or content region, whereas an inline message sits within a specific section. A callout is a page-level static banner that usually can't be dismissed.
In the wild
Gmail's 'This message wasn't sent. Retry' bar at the top of a screen is a banner.
Tags
Sources