Banner
Preview appears after the next Storybook update.
<Banner />When to use
Use it for
- The whole page is in a mode the reader must not forget: previewing a past change, editing guidelines, viewing as another brand.
- Give the way out as an action on the same line ("Back to latest library"), a Button with size sm and variant secondary, and at most one more action. On narrow screens the actions go under the text and fill the row.
- strong (default, Deep Harbor) for a mode the whole page is in; neutral for a quieter, scoped mode such as an editor.
- sticky="top" or sticky="below-header" when the page scrolls long, so the way back stays in view.
Not for
- A message about the page's content (a failed build, a contrast warning): use Alert.
- Confirming an action the user just took: use a Toast.
- Marketing or announcements: Banner is for a state the page is in, not for news.
- More than one per page: merge the modes into one sentence, or pick the one that matters.
Do and don't
Every example is rendered with the real component, so it always matches what ships.
Say the mode and its consequence in one sentence
What the reader sees and what it means for their work: "Viewing the library as change #118. Nothing is saved."
Neutral for a scoped mode
An edit mode on one part of the page does not need the strong color. Keep Deep Harbor for modes the whole page is in.
A banner for news
"New components are available" is not a mode. It belongs in a changelog or an Alert, not in the strong band at the top of the page.
A vague mode
"Preview mode" does not say what is previewed or whether work is saved. Name the object and the consequence.
Accessibility
- A landmark region named by its title (role region, aria-labelledby), so screen reader users find the mode in the landmarks list.
- Not a live region: the banner is part of the page when it loads. If a mode starts without a page load, move focus to the banner title or announce the mode once.
- The actions are real Buttons on the same line as the title, reached with Tab right after the title.
- The strong appearance uses color.surface.strong (Deep Harbor in both themes) with color.text.on-solid, 8.87:1, and the focus ring inside it takes the text color. The icon and the words carry the mode, never color alone.
- Sticky banners stay under the app header (layout.header.height) and above the content (layer.sticky), so they never hide the header's controls.
Content guidelines
- Title: one sentence, the mode and what it means: "Viewing the library as change #118. Nothing is saved."
- Detail: one more line only when it adds something: what is different, what is kept.
- Action: the way back as a verb phrase naming where it goes: "Back to latest library", "Stop editing".
- No exclamation marks, no apology.
From the code Generated from the component, not editable here.
Anatomy and tokens
Read from packages/react/src/components/Banner/Banner.module.css at build time. Every value is a token: open one to see its alias chain in both themes.
- Container, a landmark region named by the title
.banner - Strong appearance: Deep Harbor (default)
.strong - Neutral appearance: subtle ground
.neutral - Sticky at the top of the scroll area
.stickyTop, .stickyHeader - Sticky under the app header
.stickyHeader - Icon and text, kept together on the left
.lead - Mode icon
.icon - Text column
.content - Title: the mode in one sentence
.title - The way back, and at most one more action
.actions - Container, a landmark region named by the title
@media (max-width: 640px) .banner
Motion and interaction
Banner does not animate: its states change at once.
From the code Generated from the component, not editable here.
Props
Parsed from the TypeScript types in packages/react/src/components/Banner/Banner.tsx, so this table cannot drift from the code. It also accepts every native <div> attribute except title.
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | ReactNode | none | The mode, in one sentence: "Viewing the library as change #118. Nothing is saved." |
children | ReactNode | none | One more line when the mode needs it: what is different, what is kept. |
icon | LucideIcon | none | Leading Lucide icon for the mode, for example Eye for a preview. |
actions | ReactNode | none | The way out, and at most one more action, on the same line: Buttons with `variant="secondary"`. |
appearance | 'strong' | 'neutral' | 'strong' | `strong` (default): Deep Harbor, the one strong color, for a mode the whole page is in. `neutral`: the subtle ground, for a quieter mode such as a scoped editor. |
sticky | 'top' | 'below-header' | none | Keep the banner in view while the page scrolls: at the top of the scroll area, or under the app header (`layout.header.height`). |
Playground
Change the props and see the real Banner update. Controls are generated from the TypeScript props; nothing here changes the system.
<Banner sticky="top" title="Viewing the library as change #118. Nothing is saved." />Workbench
For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Banner in Storybook).
Embed Storybook stories here (7)
Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.
Preview
WithDetail
Neutral
TitleOnly
StickyTop
NarrowWithActions
AllStates
From the code Generated from the component, not editable here.
Changelog
- New
Sample team: "See it as" on the banner lets a visitor see Studio as any of Acme Design's five people (Dana, Sofia, Leo, Malik, Ann), with their own home, gates and words
v1.0.0, Nov 11, 2026
- New
Studio Branches is all the work: the summary banner, the tabs and the status menu are gone
v1.0.0, Nov 11, 2026
- Fix
The CLI reports its own version:
bridge --version, the help banner, audit reports and snapshots recorded the@bridge-ds/mcpversion (0.8.3) insteadv1.0.0, Nov 11, 2026
- Fix
Studio right after sign-in: a team page waits for your sign-in before saying who you are, so an admin sees "Checking" and then "Admin", never "Guest", the read-only banner or a short members list
v1.0.0, Nov 11, 2026
- Fix
Hosted Studio for guests: signed out, a team's pages read its published
activity.json(no GitHub API request), with "Updated 5 min ago" in the guest bannerv1.0.0, Nov 11, 2026