Banner
Full-width alert strip for incidents, drafts, and system-wide notices. Appears between app chrome and content.
Component behavior
Banner is page-level and persistent: it describes a condition that holds until something changes, such as degraded service, an expiring trial, or a read-only environment. It occupies space in the layout rather than floating over it.
- Conditions affecting the page or account.
- Persistent information that does not require immediate action.
- Environment indicators such as staging, impersonation, or read-only mode.
Props
Banner extends HTMLAttributes<HTMLDivElement>.
| Prop | Type | Default | Description |
|---|---|---|---|
tone | BannerTone | "warn" | Tone name or alias. Canonical names are neutral, primary, info, ok, warn, and err. |
title | ReactNode | — | The condition in a few words. Adding it stacks the banner; the body then explains. |
children | ReactNode | — | Message content. Renders as one line when title is omitted. |
meta | ReactNode | — | Secondary content after the message. |
actions | ReactNode | — | Buttons or links at the trailing edge. |
icon | ReactNode | null | — | Replaces the tone icon. Pass null to hide the icon. |
onDismiss | () => void | — | Shows a close button and calls this on click. |
dismissLabel | string | "Dismiss" | Accessible name for the close button. |
flush | boolean | — | Removes the corner radius and side borders. |
Banner defaults to role="status", which creates a polite live region. Set role="alert" when the message requires an interrupting announcement.
Examples
Tones
Tone shows in three places: the tint, the border, and the icon. This matches Callout. The component uses the full tone scale, not a banner-specific set.
Title and body
A message on its own stays one line. Adding a title stacks the title above the body within the same component, so no swap to a different component is needed when a condition needs explaining.
With meta
With actions
Dismissible
Offer dismissal only for conditions the reader can reasonably choose to stop seeing. A banner about a read-only environment or an active incident should not offer a close button.
Flush
When a banner is pinned under app chrome, use flush to drop the radius and side borders so it meets both edges of the window.
Custom icon
import { Banner } from "@solarius/onset";
import type { BannerTone } from "@solarius/onset";
<Banner tone="warn" meta="Incident #1042">
Degraded performance on the primary cluster
</Banner>
<Banner
flush
tone="err"
title="Primary region unreachable"
actions={<Button size="sm">Status page</Button>}
onDismiss={() => setShown(false)}
>
Requests are being served from eu-west-1.
</Banner>