Skip to content
TrademarkTrademark
Docs
Components

Banner

Updated: October 24, 2026
View on GitHub

A simple component for displaying important announcements, notifications, or status messages in a prominent horizontal bar. Commonly used to draw attention to critical information or updates.

Announcement

A launch strip: a soft mesh drawn from the theme's brand and accent scales, an inline link, and a dismiss button. With a dismissKey the dismissal is remembered in the browser and the banner stays hidden from the first paint on later visits (ThemeInit reads it). Use a new key for each announcement.

Pick the colour scales the mesh is drawn from with meshColors.

With icons

Add icons to enhance visual communication.

Custom styling

Customize the appearance of banners using Flex props.

With actions

Add interactive elements to banners.

API reference

Type
Default
variant
solid is a flat brand strip; mesh is a soft blurred gradient wash from the theme's colour scales.
solidmesh
solid
meshColors
Up to three colour scales the mesh is drawn from. Default brand, accent, brand.
ColorScheme[]—
link
An inline, underlined call to action after the message.
{ label: ReactNode; href: string }—
dismissible
Shows a dismiss button. Hides the banner until the next page load.
boolean—
dismissKey
Remembers the dismissal in the browser under this key (implies dismissible). Use a new key per announcement.
string—
dismissLabel
The dismiss button's accessible name.
string—
…and every FlexProps propinherited—
children
React.ReactNode—
Edit this page on GitHub