SayUI
← Library→ Turn this into a prompt
Overlays & feedback

Alert / Banner

An in-page, persistent status strip—four severities, never traps the user in a dialog.

Also known as inline alert · page banner · status banner

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Alert / Banner".

Add an inline alert banner above the form summarizing validation errors: role="alert" for errors only (role="status" for info/success), icon plus color for severity, each error as an anchor that focuses the field. Persistent state banners (billing overdue) get an action and no auto-dismiss.

Anatomy:
- status icon: Severity needs icon plus color—not color alone (color-blind users).
- message: What happened and what to do next.
- action: Optional link or button (“Renew plan”).
- close button: Optional; system-critical notices often stay.

Preferred API / pattern: `custom banner / shadcn Alert`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

  • ○Avoid: Using Alert as a success toast that never leaves
  • ○Avoid: Info messages with role="alert"
  • ○Avoid: Color without icon
  • ○Avoid: Error summary with no links
  • ○Avoid: Too many permanent banners

In plain wordsHow people search for it

“the full-width yellow strip at the top of the page”“the red summary bar above a form listing what is wrong”“a little exclamation strip that stays until the problem is fixed”

AnatomyOpen for part names

status icon
Severity needs icon plus color—not color alone (color-blind users).
message
What happened and what to do next.
action
Optional link or button (“Renew plan”).
close button
Optional; system-critical notices often stay.

How to write itOpen for stack patterns

Web (HTML/CSS)role="status" / role="alert" (errors only)
React + Tailwind + shadcn/uicustom banner / shadcn Alert
SwiftUIbanner overlay / Label + rounded rectangle
Ant Design<Alert type="info|success|warning|error" closable />

Notes

Boundary with toast is time: toasts report a one-shot action then leave; alerts describe a lasting state (past-due billing, three form errors, maintenance window). Severity colors are a shared language: blue info, green success, amber warning, red error. Only error deserves role="alert"; the rest use role="status". Form-top error summaries with jump links to bad fields are a high-value pattern.

Common mistakesHumans and models trip here

  • Using Alert as a success toast that never leaves: one-shot results belong in a toast.
  • Info messages with role="alert": needlessly interrupts screen readers.
  • Color without icon: color-blind users cannot tell yellow from red strips.
  • Error summary with no links: lists three problems but not where—make anchors.
  • Too many permanent banners: severity inflation; users learn to ignore them.

More failure symptoms on AI broke it.

Related patterns

Toast / SnackbarA brief, non-blocking status bar that appears after an action and dismisses itself.NotificationRich reminder cards that slide into a screen corner—title, body, optional action, stackable.Form FieldOne complete input unit: label, control, placeholder, helper text, and error message.

Spotted a wrong name or missing pattern?

Message on X