Content
- One sentence, sentence case. Put the fix in the action or the sentence.
ExperimentalmoleculeFeedback
PageBanner
A full-width notice strip under the top navigation.
import { … } from "@brdgapp/ui/components/page-banner"Usage
PageBanner is the full-width notice strip that sits right under the top navigation and stays pinned while the page scrolls: "Your profile is 60% complete", "Preview: sample data". It lines its text up with the page column below. The usual mistake is stacking several banners, or using one for a message that belongs next to the thing it's about.
When to use
- A page-wide message that applies to everything below it.
placement="inline"for the same notice inside a card, or on a page outside the Bridge OS shell.
When not to use
- For a short confirmation after an action ("Saved"). Use a toast.
- For an error about one field or one card. Put it next to that thing.
Anatomy
Your profile is 60% complete.
Strip. The variant's tint and a bottom border. Page placement: full width, pinned under the 56px nav.
Icon. Optional, 16px, in the variant's color.
Message. One line, 13px SemiBold.
Action. Optional link or button at the end.
Examples
Variants
Shown inline here; in an app it pins under the top navigation.
Your profile is 60% complete.
Preview: this page shows sample data.
Your calendar is connected.
We couldn’t sync your email. Reconnect it in Settings.
States
| State | What happens |
|---|---|
| Variants | info, warning, success, error, each from its token family. |
Behavior
- Page placement: put it first inside the page's centered column. It breaks out to the screen edges and re-centres its content with
contentWidthClass(e.g.LAYOUT_FORM). - It isn't a live region. If the message appears after the page loads, announce it separately.
Do and don't
Do
Show at most one banner per page.Don't
Stack a warning on top of an info banner.Do
Say what to do: "Reconnect it in Settings."Don't
Only say something went wrong.Accessibility
- Color isn't the only signal: pair the variant with an icon and clear words.
| Keys | Action |
|---|---|
| Tab | Reaches the action, if there is one. |
API reference
PageBanner
The notice strip.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "info" | "warning" | "success" | "error" | "info" | Color and meaning. |
placement | "page" | "inline" | "page" | Pinned full-width under the nav, or a rounded box in place. New in the package. |
icon | ReactNode | — | A bare Lucide icon. |
action | ReactNode | — | One link or button. |
contentWidthClass | string | — | Page placement: the page column's width class, so the text lines up. |
children | ReactNode | — | The message. |
className | string | — | Layout only. |
Lineage
What it's built from and where it's used, read from the code. When you change it, check these too.
- Built from
- Nothing else in the package
- Used by components
- None
- Used in patterns
- Education and onboarding
- Used in templates
- None
Known gaps
Where the code still differs from the system. Follow the system, not the gap.
- Page placement assumes Bridge OS's shell (56px nav,
py-8page padding). Other apps should useplacement="inline"until their shell matches.
Sources
- Bridge OS
components.md→ PageBanner;src/components/ui/page-banner.tsx.