What is Banner?

A banner is a full-width strip, usually at the top of the page or of a section, that carries a message meant to stay: your trial ends in three days, this workspace is read-only, we are investigating an outage, a new version is ready. It is the opposite of a toast. A toast reports something that just happened and goes away; a banner describes a standing condition and stays until the condition ends or the user dismisses it. Banners push the content down rather than floating over it, so nothing is hidden.

Kinds of banner

• Announcement: a new feature, an event, a promotion. Dismissable, and remembered as dismissed for that user.
• Warning: a trial or quota running out, an unverified email, unsaved changes. Includes the one action that resolves it.
• Incident or danger: an outage, a failed payment, a lost connection. Not dismissable until resolved.
• Consent and legal: cookie notices and terms updates, which need a clear accept action and must not block the page.
• Impersonation or environment: "You are viewing as Maya Chen" or "Staging", so no one forgets what they are looking at.

Writing and placement

One sentence, the specific fact, and one action: "Your trial ends on March 14. Add a payment method." Place page-level banners above the top bar or directly under it, and section-level banners at the top of the section they describe, such as a read-only notice above a form. Show at most one banner at a time; if two conditions apply, show the more severe and queue the other. Three colored strips stacked at the top of a page is a sign that something upstream needs fixing.

Accessibility

A banner present when the page loads needs no special announcement; make it a landmark with role="region" and an aria-label such as "Trial notice" so it is easy to find and skip. A banner that appears while the user is on the page, such as a lost connection, should be a live region: role="status" for information, role="alert" only for problems that need attention now. The dismiss button needs a name ("Dismiss notice"), and dismissing should move focus somewhere sensible, not to the top of the document. Text and icons on tinted backgrounds follow the usual WCAG contrast rules, and the tone must be stated in words, not only in color.

How to build one in React

MiniDev's Banner takes a tone, an optional action and an onDismiss that renders the close button:

"use client"
import * as React from "react"
import Link from "next/link"
import { Banner } from "@/components/ui/banner"
import { Button } from "@/components/ui/button"

export function TrialNotice({ endsOn }: { endsOn: string }) {
  const [shown, setShown] = React.useState(true)
  if (!shown) return null
  return (
    <Banner
      tone="warning"
      action={<Button size="sm" render={<Link href="/settings/billing" />}>Add payment method</Button>}
      onDismiss={() => setShown(false)}
    >
      Your trial ends on {endsOn}.
    </Banner>
  )
}

Persist the dismissal, in the user's settings or at least in localStorage, so the same announcement does not return on every page load. Ready-made variants cover the common cases: AnnouncementBar, TrialBanner, IncidentBanner, OfflineBanner and CookieBanner, all in the feedback category.