Alert banner

A colored strip on the page with an important message: information, success, a warning or an error.

Also called: alert, alert banner, banner, warning, warning banner, notice, callout, error message, error, red banner, yellow banner, info message

What it is for

A toast disappears after a couple of seconds, but a banner stays on the page until the issue is dealt with. For example, until the email is confirmed or an expiring card is replaced. Its color and icon show how serious it is.

Where you see it

• Account pages — “Confirm your email to receive receipts”
• Forms — a list of errors above the Submit button
• Many websites — a cookie consent banner at the bottom of the screen

What it is called in code

• role="alert"
• Alert
• banner / callout

See also

• Toast (notification) — A small message that pops up briefly at the bottom or in a corner of the screen and disappears on its own.
• Modal window — A window that appears over the page. Until you close it, you can’t do anything else on the page.
• Text input — A field where a person types something in: letters, numbers, symbols.