Banner

Banner is the canonical full-width banner component. The tone prop switches between two visual modes: announcement (brand-primary surface, marketing notices) and status (secondary surface + leading status Badge, replaces the deprecated AlertBanner).

<Banner title="..." tone="warning" />

<Toast title="..." variant="success" />

<Tooltip content="..."><Trigger /></Tooltip>

Use it for

• Site-wide marketing announcements (brand-primary surface, default tone)
• Persistent status alerts that need to stay visible (tone="warning|error|information")
• Trial-expires / quota-exceeded / system-degraded warnings
• Maintenance windows, deployment notices

For ephemeral confirmations that auto-dismiss, use Toast. For hover-only help, use Tooltip.

Import

import { Banner } from '@brikdesigns/bds';

Variants

Announcement (default)

Brand-primary surface with inverse text. The marketing-notice mode.

<Banner
  title="New feature available"
  description="Check out our latest update — it's live now."
  action={<Button variant="secondary" size="sm">Learn more</Button>}
  onDismiss={() => setVisible(false)}
/>

Status tones

information, warning, error render on a secondary surface with a leading status Badge and role="alert" for assistive tech. Replaces the deprecated AlertBanner — same shape, same Badge, same surface.

<Banner
  tone="warning"
  title="Trial ends in 7 days"
  description="Upgrade to keep access to all features."
  action={<Button size="sm">Upgrade</Button>}
/>

<Banner
  tone="error"
  title="Deployment failed"
  description="Build #4291 hit an unrecoverable error. Logs attached."
/>

<Banner
  tone="information"
  title="Maintenance window"
  description="System will be unavailable Saturday 2-4am UTC."
/>

Dismissible

Pass onDismiss to render a close button. Common with announcements.

<Banner
  title="Welcome back"
  onDismiss={() => setVisible(false)}
/>

Title-only

description is optional — title-only banners work for short messages.

<Banner title="System updates tonight at 11pm UTC" tone="information" />

When not to use

• Don't use Banner for short-lived confirmations ("Saved", "Copied"). Those are Toasts.
• Don't stack multiple Banners. A second Banner stack reads as visual noise. Pick the highest-priority message and surface it; queue others.
• Don't put navigation actions in Banner. Use it for "this state needs your attention," not "here's a link to somewhere else."

Accessibility

• Tone-coded banners (warning|error|information) get role="alert" so assistive tech announces them on render.
• Announcement banners (default) render as a generic landmark.
• The leading Badge uses an aria-hidden icon plus the tone-implicit semantics — title text carries the meaning.
• onDismiss adds a button with aria-label="Dismiss".

API

Plus all standard <div> HTML attributes (excluding title).

Migration from AlertBanner

AlertBanner is @deprecated and slated for deletion. Same shape, same Badge, same secondary surface — just renamed under Banner.

// Before
<AlertBanner variant="warning" title="..." description="..." />

// After
<Banner tone="warning" title="..." description="..." />

Related

• Toast — ephemeral sibling
• Tooltip — hover-revealed sibling
• EmptyState — for when a section has no data
• AlertBanner (deprecated) — migrate to <Banner tone="...">
• Storybook playground