Banner

One message for the whole page, full width above the header. It sits in the page flow, so it pushes the page down and covers nothing.

split - size not measured yet

Banner

split - size not measured yet

One message for the whole page, full width above the header. It sits in the page flow, so it pushes the page down and covers nothing.

Install

Version 2 is out, with faster builds and a new theme editor.

Read the changelog

Try it

tone

dismissible

The code

banner.tsx

import { bell } from 'topclassui/icons/bell'
import { Button } from 'topclassui/button'
import { Svg } from 'topclassui/svg'
import { Banner } from 'topclassui/banner'

<Banner
  id="banner-playground"
  aria-label="Version 2 announcement"
  icon={<Svg icon={bell} size="xs" />}
  action={<Button size="sm" variant="outline" tone="neutral" render={<a href="/changelog" />}>Read the changelog</Button>}
>
  Version 2 is out, with faster builds and a new theme editor.
</Banner>

Dismissal is remembered per id in this browser, so change the id when the message changes.

Every state

9 states

Primary

Neutral

Success

Warning

Danger

Info

No icon

With action

Dismissible

Examples

For one message the whole page should see: a release, a trial ending, planned maintenance. Put it above the header.
A link action is a Button with render={<a href="..." />}; a bare link gets no styling and no 44 px touch target. When the message and the action do not fit on one line, the action moves under the message.
Pass an icon when the tone matters: colour alone does not tell a warning from a notice.
dismissible and id are plain values, so a Server Component page needs no client wrapper, and only a dismissible banner ships the client part. onDismiss is a function, so only a client file can pass it.
The server cannot read the visitor's storage, so the next page shows a dismissed banner until the script runs and then removes it, and the page below moves up. That is why dismissible is off by default.

basic

Version 2 is out, with faster builds and a new theme editor.

Read the changelog

basic.tsx

import { bell } from 'topclassui/icons/bell'
import { Button } from 'topclassui/button'
import { Svg } from 'topclassui/svg'
import { Banner } from 'topclassui/banner'

/** The drawn banner: an icon, the message and a link, on the soft info tone. */
export default function Demo() {
  return (
    <Banner
      tone="info"
      aria-label="New version announcement"
      icon={<Svg icon={bell} size="xs" />}
      action={<Button size="sm" variant="outline" tone="info" render={<a href="/changelog" />}>Read the changelog</Button>}
    >
      Version 2 is out, with faster builds and a new theme editor.
    </Banner>
  )
}

tones

A new plan is available.

You are viewing an archived project.

Your domain is verified.

Your trial ends in three days.

The last payment failed.

Version 2 is out.

tones.tsx

import { info } from 'topclassui/icons/info'
import { Svg } from 'topclassui/svg'
import { Banner } from 'topclassui/banner'

const ICON = <Svg icon={info} size="xs" />

/** All six tones, each a landmark with a name of its own. */
export default function Demo() {
  return (
    <div className="flex flex-col gap-3">
      <Banner tone="primary" aria-label="Primary banner" icon={ICON}>A new plan is available.</Banner>
      <Banner tone="neutral" aria-label="Neutral banner" icon={ICON}>You are viewing an archived project.</Banner>
      <Banner tone="success" aria-label="Success banner" icon={ICON}>Your domain is verified.</Banner>
      <Banner tone="warning" aria-label="Warning banner" icon={ICON}>Your trial ends in three days.</Banner>
      <Banner tone="danger" aria-label="Danger banner" icon={ICON}>The last payment failed.</Banner>
      <Banner tone="info" aria-label="Info banner" icon={ICON}>Version 2 is out.</Banner>
    </div>
  )
}

with-action

Your trial ends in three days.

Add a payment method

The last payment failed, so deploys are paused.

A new plan is available.

Compare plans

with-action.tsx

import { warning } from 'topclassui/icons/warning'
import { Button } from 'topclassui/button'
import { Svg } from 'topclassui/svg'
import { Banner } from 'topclassui/banner'

/** The action is a Button in the banner's own tone: a link through render, or a button. */
export default function Demo() {
  return (
    <div className="flex flex-col gap-3">
      <Banner
        tone="warning"
        aria-label="Trial notice"
        icon={<Svg icon={warning} size="xs" />}
        action={<Button size="sm" tone="warning" render={<a href="/billing" />}>Add a payment method</Button>}
      >
        Your trial ends in three days.
      </Banner>
      <Banner
        tone="danger"
        aria-label="Payment notice"
        action={<Button size="sm" variant="outline" tone="danger">Retry the payment</Button>}
      >
        The last payment failed, so deploys are paused.
      </Banner>
      <Banner
        aria-labelledby="banner-plan-message"
        action={<Button size="sm" variant="outline" render={<a href="/plans" />}>Compare plans</Button>}
      >
        <span id="banner-plan-message">A new plan is available.</span>
      </Banner>
    </div>
  )
}

dismissible

Version 2 is out, with faster builds and a new theme editor.

Read the changelog

Scheduled maintenance starts on Sunday at 02:00 UTC.

dismissible.tsx

import { bell } from 'topclassui/icons/bell'
import { Button } from 'topclassui/button'
import { Svg } from 'topclassui/svg'
import { Banner } from 'topclassui/banner'

/** Two banners a visitor can dismiss, each remembered by its own id: the x hides one and leaves the other. */
export default function Demo() {
  return (
    <div className="flex flex-col gap-3">
      <Banner
        dismissible
        id="release-v2"
        tone="info"
        aria-label="Release announcement"
        icon={<Svg icon={bell} size="xs" />}
        action={<Button size="sm" variant="outline" tone="info" render={<a href="/changelog" />}>Read the changelog</Button>}
      >
        Version 2 is out, with faster builds and a new theme editor.
      </Banner>
      <Banner dismissible id="maintenance-sunday" tone="warning" aria-label="Maintenance notice">
        Scheduled maintenance starts on Sunday at 02:00 UTC.
      </Banner>
    </div>
  )
}

minimal

Scheduled maintenance starts on Sunday at 02:00 UTC.

minimal.tsx

import { Banner } from 'topclassui/banner'

/** The message alone, on the default tone. */
export default function Demo() {
  return <Banner aria-label="Maintenance window">Scheduled maintenance starts on Sunday at 02:00 UTC.</Banner>
}

long-action

Your workspace has used its monthly build minutes, so new deployments wait until the plan is upgraded.

Upgrade the workspace plan and resume deployments now

تجاوزت مساحة العمل دقائق البناء الشهرية، لذلك تنتظر عمليات النشر الجديدة حتى تتم ترقية الخطة.

long-action.tsx

import { warning } from 'topclassui/icons/warning'
import { Button } from 'topclassui/button'
import { Svg } from 'topclassui/svg'
import { Banner } from 'topclassui/banner'

/** A phone-wide box: a long action drops to a line of its own, so the message keeps a readable width. */
export default function Demo() {
  return (
    <div className="flex w-full max-w-80 flex-col gap-3">
      <Banner
        tone="warning"
        aria-label="Build minutes notice"
        icon={<Svg icon={warning} size="xs" />}
        action={(
          <Button size="sm" variant="outline" tone="warning" render={<a href="/billing" />}>
            Upgrade the workspace plan and resume deployments now
          </Button>
        )}
      >
        Your workspace has used its monthly build minutes, so new deployments wait until the plan is upgraded.
      </Banner>
      <div dir="rtl" lang="ar">
        <Banner
          tone="info"
          aria-label="إشعار دقائق البناء"
          action={<Button size="sm" variant="outline" tone="info">ترقية خطة مساحة العمل واستئناف النشر الآن</Button>}
        >
          تجاوزت مساحة العمل دقائق البناء الشهرية، لذلك تنتظر عمليات النشر الجديدة حتى تتم ترقية الخطة.
        </Banner>
      </div>
    </div>
  )
}

long-text

The deploy is taking longer than usual while the static assets upload to the edge network.

Status

https://example.com/projects/topclassui/deployments/2026-10-09/logs/build-step-four-of-six.txt

long-text.tsx

import { Button } from 'topclassui/button'
import { Banner } from 'topclassui/banner'

const LOG_URL = 'https://example.com/projects/topclassui/deployments/2026-10-09/logs/build-step-four-of-six.txt'

/** Two narrow boxes: the long message wraps above its action, and the unbroken URL breaks anywhere. */
export default function Demo() {
  return (
    <div className="flex flex-col gap-3">
      <div className="w-64">
        <Banner
          tone="warning"
          aria-label="Long notice"
          action={<Button size="sm" variant="outline" tone="warning" render={<a href="/status" />}>Status</Button>}
        >
          The deploy is taking longer than usual while the static assets upload to the edge network.
        </Banner>
      </div>
      <div className="w-64">
        <Banner tone="danger" aria-label="Log address">{LOG_URL}</Banner>
      </div>
    </div>
  )
}

In Arabic, right to left

صدر الإصدار الثاني، مع بناء أسرع ومحرر جديد للسمات.

اقرأ المزيد

تنتهي الفترة التجريبية بعد ثلاثة أيام.

rtl.tsx

import { bell } from 'topclassui/icons/bell'
import { Button } from 'topclassui/button'
import { Svg } from 'topclassui/svg'
import { Banner } from 'topclassui/banner'

/** Right to left: the icon at the start and the action at the end, with no physical class to mirror. */
export default function Demo() {
  return (
    <div dir="rtl" lang="ar" className="flex flex-col gap-3">
      <Banner
        tone="info"
        aria-label="إعلان الإصدار"
        icon={<Svg icon={bell} size="xs" />}
        action={<Button size="sm" variant="outline" tone="info" render={<a href="/changelog" />}>اقرأ المزيد</Button>}
      >
        صدر الإصدار الثاني، مع بناء أسرع ومحرر جديد للسمات.
      </Banner>
      <Banner tone="warning" aria-label="تنبيه الفترة التجريبية">
        تنتهي الفترة التجريبية بعد ثلاثة أيام.
      </Banner>
    </div>
  )
}

Props

The props of Banner
Prop	Type	Default	Limits	Description
`aria-label`	`string`	-	-	The name of the landmark, such as "Release announcement".
`aria-labelledby`	`string`	-	-	The id of the visible text that names the landmark.
`id`	`string`	-	-	The key the dismissal is remembered under, and the element's id. Required with `dismissible`.
`action`	`ReactNode`	-	-	The caller's link or Button, after the message.
`children`	`ReactNode`	-	-	The message: a sentence that wraps and is never cut.
`dismissible`	`boolean`	`false`	-	Adds an x that hides the banner and remembers it in this browser. Requires `id`.
`icon`	`ReactNode`	-	-	Shown before the message, such as a 16 px Svg. Leave it out for none.
`tone`	`primary` \| `neutral` \| `success` \| `warning` \| `danger` \| `info`	`"primary"`	-	What the message means, which picks the soft fill and the text colour on it.

Keyboard and accessibility

The keyboard of Banner
Keys	What it does
`Tab`	Reaches the action, then the x.
`EnterSpace`	On the x, hides the banner and remembers it in this browser. Focus falls to the page; move it in onDismiss to put it somewhere.

A banner is a region landmark, so it needs a name: pass aria-label or aria-labelledby. The type refuses a Banner with neither, and two banners on a page need two names.
The x is 24 px, and 44 px on a touch screen. Under forced colours a hovered x draws an outline, and the banner draws an edge in place of its fill.
A dismissible banner needs an id, which the type requires; it is also the element's id.

Right to left

The icon sits at the start, the action at the end, and the x at the inline end of whatever line it wraps to, with no physical class to mirror.

Server and client

Renders on the server; the interactive part is a client component that ships only when it is used.

Files: index.tsx, client.tsx.

On the chip: split - size not measured yet.

Try it

The code

Every state

Import from the package

Examples

Props

Keyboard and accessibility

Right to left

Server and client

Related