Banner

A status message: 1 colored icon, a title, an optional description and up to 3 actions.

Installation

Installs the Base UI flavor. Switch in the right panel.

Inspect

Inter is missing its opsz axis

Labels shift when their weight changes. Load the variable font file with its optical-size axis.

5 statuses, 2 contrasts. Low colors only the icon; high washes the whole banner.

Inspect

Low contrast

Default

Info

Success

Warning

Error

High contrast

Default

Info

Success

Warning

Error

3 variants. Primary sits at the edge next to a one-line title, and leads under a description.

Inspect

Enjoying BoringUI?

The registry has new components

Run the install command again to pull the latest versions.

variant="fixed" runs edge to edge under your header. Scroll the content: the bar stays put. Press ✕: it closes and the content slides up.

Inspect

Registry maintenance tonight at 22:00 UTC

icon swaps in any icon, drawn in the status color.

Inspect

3 new components since your last visit

Prop	Type	Default	Description
status	"default" \| "info" \| "success" \| "warning" \| "error"	"default"	Sets the color and the icon.
contrast	"low" \| "high"	"low"	low colors only the icon. high tints the whole banner.
variant	"inline" \| "fixed"	"inline"	fixed spans the full width and sticks to the top.
icon	IconComponent	—	Replaces the status icon.
dismissible	boolean	false	Shows a ✕ button.
onDismiss	() => void	—	Called when the ✕ is pressed.
dismissLabel	string	"Dismiss"	Label read by screen readers for the ✕.
open	boolean	—	Controls visibility. Without it, the ✕ hides the banner.
size	"default" \| "compact"	from SizeProvider	Default or compact.

Prop	Type	Default	Description
BannerTitle	part	—	The message.
BannerDescription	part	—	Optional text under the title.
BannerActions	part	—	Up to 3 BannerAction. Primary sits at the edge, or first under a description.

Prop	Type	Default	Description
variant	"primary" \| "secondary" \| "ghost"	"secondary"	The button style.
href	string	—	Renders a link instead of a button.
external	boolean	false	Opens the link in a new tab.
onClick	(event) => void	—	Called on click.