Banner

Overview

A banner sits inside the page (or pinned to its top) and reports something the user needs to know — an order saved, a payment declined, a setting that needs verification. It carries a tone (what kind of news), a type (how much copy), and a position (where on the page). The body of the page keeps working; the banner just informs.

Anatomy

Five parts. The container takes the tone-tinted background and tone-tinted text. Inside it, a 24 px leading icon names the tone, a message body carries the copy, and an optional 48 × 48 dismiss button sits trailing.

Tones

Five tones, each tied to a specific kind of news. Pick the tone the page is announcing — never the tone you wish the page were announcing. A successful action that feels precarious is still success.

Types

Two layouts cover almost every banner in the product. Single-line for status updates and confirmations; multi-line for validation summaries that list multiple problems.

Position

Two positions. Page-top spans the viewport and sits above the page content — use it when the message is about the whole page or session. Embedded sits inside a section, scoped to its surrounding context.

Dismiss

The dismiss action lets the user clear the banner manually. Default-on for confirmations and non-blocking notices; default-off for blocking ones — the user must resolve the underlying issue, not dismiss the message.

Behavior

• 01Banners persist until dismissed or resolved. Unlike a toast, they stay visible. The user closes them explicitly (dismissable) or the underlying state changes (validation passes, settings update). Don't auto-fade.
• 02One banner per scope. At most one banner per page-top, one per embedded section. Stacking banners reads as noise — the user stops reading after the second. If the page genuinely has multiple problems, fold them into a single multi-line banner.
• 03The inline action is one verb. “View orders”, “Resolve”, “Learn more”. If you need two paths, the banner isn't the right surface — reach for a dialog or a sheet.
• 04Dismissed banners don't come back on the same session. When the user dismisses a banner, persist that dismissal for the session (or the user, when authenticated). Re-rendering the same banner on a route change feels broken.
• 05Banners enter and exit, they don't pop. 200 ms fade + a small translateY on entry. Honour prefers-reduced-motion — keep the fade, drop the translate.

Banner vs. inline message vs. toast

Three feedback surfaces share the same tone palette but earn different jobs.

Accessibility

• Role per tone. role="alert" for critical and warning — interrupts current screen-reader output. role="status" for success, caution, and info — announces politely without interrupting. Don't apply role="alert" to a confirmation; it interrupts and feels rude.
• Tone never carries meaning alone. Every banner pairs the colour with an icon and a message. Screen-reader users and people with colour-vision differences both read the message from the icon + copy.
• Inline action is a button or a link. When it navigates, use <a>; when it performs an action, <button>. Don't style a <span> with onClick to look like a link.
• Dismiss button is labelled.A bare close glyph isn't enough — aria-label="Dismiss" (or a more specific verb when the action does more than dismiss the banner).
• Focus management: page-top banners with role="alert" don't steal focus. Embedded banners that announce a validation failure can move focus to the first invalid field, not to the banner itself.
• Contrast: every text colour ships at WCAG AA against its tone background. The 900 step of each hue is the minimum; never lighten for aesthetic reasons.

Code

One Banner component handles every variant. The tone is the only required prop — type, position, and dismiss have sensible defaults.

import { Banner } from "@flatpay-dk/ui";

// Default — single-line, embedded, dismissable
<Banner tone="success" action={<a href="/orders">View orders</a>}>
  Order saved.
</Banner>

// Critical — multi-line bullets, non-dismissable
<Banner
  tone="critical"
  type="multiLine"
  position="embedded"
  title="Errors found"
  bullets={[
    "Settlement account is missing a routing number.",
    "Beneficial owner address is incomplete.",
  ]}
  dismissable={false}
/>

// Page-top info banner with a single inline action
<Banner
  tone="info"
  position="pageTop"
  action={<a href="/tables">View tables</a>}
>
  Select a table to move.
</Banner>

// Caution with no action — the message itself is the news
<Banner tone="caution" dismissable>
  Order needs review before it can ship.
</Banner>

// Persisting dismissal
const [dismissed, setDismissed] = useLocalStorage("banner.kyc", false);

{!dismissed && (
  <Banner
    tone="warning"
    onDismiss={() => setDismissed(true)}
    action={<a href="/kyc">Verify</a>}
  >
    Settlement account needs verification.
  </Banner>
)}

Best practices

Banners are read fast. The defaults below keep them legible without shouting.

Props

Related