Banner

Page-level message strip — incident notices, plan limits, deprecation warnings. Five tones (info / success / warning / danger / neutral), optional icon + title + action + dismiss button. Can pin to the top of its scroll container.

Usage

import { Banner, Button } from '@bwo-ui/react';

<Banner tone="warning" title="Plan limit" icon={<WarnIcon />}>
  You've used 92% of this month's API quota.
</Banner>

<Banner tone="info" sticky onDismiss={() => mark('seen')}>
  Maintenance window starts 23:00 UTC.
</Banner>

Props

Prop	Type	Default	Description
`tone`	`'info' \| 'success' \| 'warning' \| 'danger' \| 'neutral'`	`'info'`	Visual + accessibility tone.
`icon`	`ReactNode`	—	Leading icon.
`title`	`ReactNode`	—	Bold title before the body.
`action`	`ReactNode`	—	Trailing action — usually a Button or link.
`onDismiss`	`() => void`	—	When provided, renders a close (×) button on the right.
`sticky`	`boolean`	`false`	Pin to the top of the scroll container.