Banner
Announcement strip. Compound API so you compose slim, single-action, dual-action, text-field, or countdown shapes from the same primitives. Pairs with the FeaturedIcon primitive for the leading slot.
Configurator
Every axis of the Banner in one view. Switch shape, tone, size, and the leading icon variant. The code block regenerates live.
We use third-party cookies to personalise your experience.
Read our Cookie Policy.
<Banner tone="accent" size="floating">
<FeaturedIcon><SealCheckIcon weight="fill" /></FeaturedIcon>
<BannerContent>
<BannerTitle>We use third-party cookies to personalise your experience.</BannerTitle>
<BannerDescription>Read our Cookie Policy.</BannerDescription>
</BannerContent>
<BannerActions>
<Button variant="outline" size="sm">Decline</Button>
<Button size="sm">Allow</Button>
</BannerActions>
<BannerClose onClick={dismiss} />
</Banner>Slim · default
Minimum layout: just text and optional close. Lowest-friction notice.
We've just launched a new feature.
Check out the new dashboard.
Single action · accent
Lime tone with a primary CTA and a FeaturedIcon in modern variant.
Series B announcement.
Read about it from our CEO.
Dual action · floating
Two actions + dismiss. Classic cookie notice shape. size='floating' gives it rounded corners and a toast-like lift.
We use third-party cookies in order to personalise your experience.
Read our Cookie Policy.
Text field · floating
Newsletter capture. Input + Button inside BannerActions.
Stay up to date with the latest.
Be the first to hear about new blocks.
Full-width · default
Sharp-corner strip flush against the page edges. Use at the top of a site for release banners or legal notices.
Scheduled maintenance this Sunday at 02:00 UTC.
Expect up to 15 minutes of downtime.
Reasoning
Ported from Untitled UI's 40-variant Banner set. Instead of reproducing the full matrix as a single enum, I broke it into six slot components — BannerContent, BannerTitle,BannerDescription, BannerActions,BannerClose, plus the standalone FeaturedIconprimitive for the leading slot. Any of the original Types is a five-line composition.
Title sits on its own line and never shares a row with the description. That rule held in every Untitled UI reference I traced and it stops the “two lines of tiny text” look when the banner gets narrow.
Close is a separate button with a 40×40 hit area. If you want the banner non-dismissable, omit the component — no booleans. That keeps the dismiss handler obvious at the call site.