Components
Banner
Full-width page banner with tone, title, actions, and dismiss.
Banner announces system-wide messages across the top of a view.
Example
Preview
New workspace features
Boards, automations, and saved views are now available to everyone.
Scheduled maintenance
We'll be offline Sunday 02:00–03:00 UTC.
import { Banner } from '@officina/ui';
<Banner tone="warning" title="Scheduled maintenance" onDismiss={dismiss}>
We'll be offline Sunday 02:00–03:00 UTC.
</Banner>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | — | Banner message body. |
| tone* | enum | — | Semantic colour of the banner. |
| actions | ReactNode | — | Trailing action buttons. |
| dismissLabel | string | Dismiss | Accessible label for the dismiss button. |
| full | boolean | — | Stretch edge-to-edge with no rounded corners. |
| icon | ReactNode | — | Custom leading icon; defaults to a tone-appropriate icon. |
| onDismiss | () => void | — | Called when the dismiss button is clicked; omit to hide it. |