UpNext / Page-Level Banner

Page-Level Banner

<Banner />New

A page-level, full-bleed callout: one straight line with square corners and no border, stroke, or outline that fills the width it's given and sits flush at the top of a page, panel, or content column. Built from Alert's exact tone vocabulary — primary · neutral · info · success · warning · error — with an optional leading icon, optional primary/secondary CTAs that auto-tone to the banner, and an optional dismiss. Every color resolves through a semantic token; nothing is hardcoded. Reach for Banner when a message spans the width of the page; reach for Alert when it's a boxed, in-layout callout that may wrap.

import { Banner } from "@/components/upnext";

Playground

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

Preview

Welcome to the new recruiting board.Your watchlist, film, and offers now live in one place.

Code

import { Banner } from "@/components/upnext";


<Banner
  title="Welcome to the new recruiting board."
  description="Your watchlist, film, and offers now live in one place."
/>

Variants

The six tones — the same set as Alert. Tone drives the flat surface tint and icon; the message stays neutral so it reads cleanly. warning + error announce assertively (role=alert), the rest are polite (role=status).

Welcome to the new recruiting board.Your watchlist, film, and offers now live in one place.

{/* primary is the default tone — omit it */}
<Banner
  title="Welcome to the new recruiting board."
  description="Your watchlist, film, and offers now live in one place."
/>

Composition

Pure one-liners, a toggleable icon, CTAs (single or a primary + secondary pair) that auto-tone through the same AlertToneContext bridge Alert uses, a dismiss, and the full-bleed page-shell fit. The message always truncates so the banner stays one line.

Changes saved.

3 recruits were added to your watchlist.

{/* emphatic: a bare message */}
<Banner tone="success" title="Changes saved." />


{/* quiet note: icon toggled off (icon={false}) — works on any tone */}
<Banner tone="neutral" icon={false} title="3 recruits were added to your watchlist." />

Source

A standalone UpNext component that borrows Alert's tone tokens, semantic icons, and CTA auto-toning bridge, then locks the layout to a single full-width row with square corners. Actions are a Button node; the meta documents every prop, its control, generated JSX, and token resolution.