Banner

A full-width announcement bar that heads a region — edge-to-edge by default, or lifted into an inset card.

tsx

1import {
2  Banner, BannerTitle, BannerDescription, BannerActions, BannerClose,
3} from "@pestoui/core"

Semantic variants

The same tint set as Alert, so the two never disagree. destructive renders role="alert"; the rest render role="status".

Scheduled maintenance

Runs may be delayed on Sunday 02:00–04:00 UTC.

All agents healthy

Last check ran 2 minutes ago.

Usage at 92%

About 4 days of credits left on this plan.

Billing failed

We couldn’t charge the card ending 0187.

BannerActions pushes itself to the end of the row; BannerClose parks a squircle icon button in the trailing gutter.

Scheduled runs are here

Multi-step workflows, shared memory and a new run log.

Same bar on the card elevation tier — rounded, fully bordered, and inset rather than spanning a rule.

Two agents are paused

They stopped after repeated tool errors.

Prop	Type	Default	Description
variant	"default" \| "info" \| "success" \| "warning" \| "destructive"	"default"	Semantic tint. "destructive" also sets role="alert"; every other variant sets role="status".
floating	boolean	false	false is an edge-to-edge rule — square corners, one hairline underneath. true lifts the same bar into a rounded, shadowed card.
icon	React.ReactNode	—	Leading glyph. Rendered aria-hidden and tinted to match the variant; sized to 18px unless the icon carries its own size class.
className	string	—	Merged onto the root — use it for width or extra spacing, not for the tint.
BannerClose aria-label	string	"Dismiss"	Accessible name for the close button. Override it when the banner dismisses something more specific.

Pesto UI · 117 documented components