Banner

Reference

Props

color: "info" | "success" | "warning" | "error" | "neutral"
actions: ReactNode (optional action slot for one or more buttons; wraps on narrow viewports)
onDismiss: () => void (optional, shows X button)
children: ReactNode (message text)

Defaults

color="info"

Example

<Banner color="warning" onDismiss={() => dismiss()}>
  Scheduled maintenance on Sunday.
</Banner>

Composability

• Banner vs Alert vs Toast: Banner is full-width, top-of-page / top-of-region announcements (maintenance, quota, trial-expiring). Alert is inline in-flow. Toast is transient floating notifications. Pick by where the message lives in the visual hierarchy.
• actions slot: Pass one or more <Button> elements — the container flex-wraps on narrow viewports so actions drop below the message rather than squeezing horizontally.
• Role=alert announces assertively. Same constraint as Alert — don't stack multiple Banners.
• Dismissal timing: onDismiss fires AFTER the exit animation completes, not on click. Use it to remove the banner from state only after it's visually gone.
• Works inside Shell layouts (TopBar / Sidebar / main content) — usually sits above main content, below the TopBar.

Gotchas

• Banner is full-width (spans container). Alert is inline.
• Renders role="alert" automatically
• onDismiss fires after the exit animation completes, not immediately on dismiss button click

Changes

v0.38.0

• Removed (BREAKING) deprecated singular action prop. Use actions={[...]} (plural).

v0.20.0

• Added actions prop (plural) for multiple action buttons with mobile-friendly flex-wrap
• Deprecated action prop — use actions instead (both still work; actions takes priority)
• Changed Root layout uses flex-wrap and children wrapper uses min-w-0 for better text truncation

v0.3.1

• Fixed BannerProps uses Omit<HTMLAttributes, 'color'> to resolve TypeScript conflict with CVA color variant

v0.3.0

• Changed (BREAKING) variant prop renamed to color for semantic intent

v0.1.0

• Added Initial release