Feedback
Banner
Persistent inline messaging — a plan limit, a sync error, a maintenance notice. Unlike a Toast, a banner holds its place in the layout until the user acts or dismisses it, so it’s right for anything that must not be missed.
npx shadcn@latest add @orbit/bannerOverview
Dismiss it — the banner removes itself from the layout.
Variants
Subtle tinted fill for inline notices, a clean card with a colored left rail, and a bold elevated card for the most important page-level messages.
Tones
Each tone carries its own glyph and color. Warning and error announce assertively (role=alert); info and success are polite status messages.
Composition
Banners scale from a single line up to a title, paragraph, and a pair of actions. A trailing text link keeps a short notice on one line.
In context
A banner usually sits just under the page header, above the content it concerns.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | "info" | "success" | "warning" | "error" | "info" | Severity — controls the glyph, tint, and announcement role. |
| variant | "subtle" | "solidLeft" | "bold" | "subtle" | Surface treatment: tinted fill, card with colored rail, or elevated card. |
| title | ReactNode | — | Optional bold headline above the body. |
| children | ReactNode | — | Body copy. |
| primaryAction | { label: string; onClick?: () => void } | — | Solid tone-colored button in the action row. |
| secondaryAction | { label: string; onClick?: () => void } | — | Quiet outlined button next to the primary. |
| inlineLink | boolean | false | Renders primaryAction as a trailing text link, keeping the banner on one line. |
| actions | ReactNode | — | Custom action slot — replaces the built-in primary/secondary buttons. |
| dismissible | boolean | true | Shows the × button; dismissal hides the banner and calls onDismiss. |
| onDismiss | () => void | — | Called when the × is clicked. |
| open | boolean | — | Controlled visibility — overrides the internal dismissed state. |
| …rest | HTMLAttributes<HTMLDivElement> | — | Everything else is forwarded to the root <div>, including ref. |
Usage
A banner is for messages tied to the page — reserve transient confirmations for the Toast.
Banner for the persistent, Toast for the fleeting
If the message must survive a page interaction or needs an action, it’s a banner — not a toast.
Stack many banners
More than one or two competing banners and people tune all of them out. Prioritize ruthlessly.
Match tone to severity
Error for things that are broken, warning for things that need attention soon, info/success for the rest.
Make critical errors dismissible-only
If the user must act, pair the message with the action — don’t let dismiss be the only way out.
Keyboard & accessibility
Warning and error banners render with role=alert so screen readers announce them assertively; info and success use role=status. Dismiss is a labeled button, and Tab reaches the actions and then the close control in reading order.