Components Feedback
Banner
StableA full-width, page-level announcement such as maintenance windows or plan limits.
Banner spans the top of the page or app shell and applies to the whole product, not one section. The default brand tone uses inverse ivory and indigo; status tones communicate urgency. Show at most one banner at a time and let people dismiss non-critical ones.
Overview
import { Banner } from '@bindshq/stance-react';
export function Basic() {
return (
<Banner dismissible action={<a href="#outlook">See what’s new</a>}>
The eSignify Outlook add-in is now available for every plan.
</Banner>
);
}Light, dark and high contrast
Every Stance component is designed and tested in all three appearance modes.
Import
import { Banner } from '@bindshq/stance-react';Platforms
Banner has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.
import { Banner } from '@bindshq/stance-react';Examples
import { Banner } from '@bindshq/stance-react';
export function Tones() {
return (
<div style={{ display: 'grid', gap: 8 }}>
<Banner tone="info" label="Information">
Directory sync now runs every hour.
</Banner>
<Banner tone="success" label="Success">
Your organisation is verified.
</Banner>
<Banner tone="warning" label="Plan limit" action={<a href="#billing">Add seats</a>}>
You have used 48 of 50 seats.
</Banner>
<Banner tone="danger" label="Service status">
Deployments are paused while Exchange Online is degraded.
</Banner>
</div>
);
}Controlled dismissal
Persist dismissal yourself, e.g. in user settings.
import * as React from 'react';
import { Banner, Button } from '@bindshq/stance-react';
export function Controlled() {
const [open, setOpen] = React.useState(true);
return (
<div style={{ display: 'grid', gap: 12, justifyItems: 'start' }}>
<Banner tone="warning" dismissible open={open} onOpenChange={setOpen} label="Maintenance">
Scheduled maintenance on Sunday, 02:00 to 03:00 GMT.
</Banner>
{!open && (
<Button size="sm" variant="outline" onClick={() => setOpen(true)}>
Restore banner
</Button>
)}
</div>
);
}API reference
| Prop | Type | Default | Description |
|---|---|---|---|
tone | 'brand' | 'info' | 'success' | 'warning' | 'danger' | 'brand' | Visual tone. |
children | ReactNode | None | The message. |
action | ReactNode | None | A link or button after the message. |
icon | ReactNode | false | None | Custom or hidden icon (status tones show one by default). |
dismissible | boolean | false | Show a dismiss button. |
open / defaultOpen / onOpenChange | boolean / boolean / (open: boolean) => void | defaultOpen: true | Visibility state. |
label | string | 'Announcement' | Accessible region name. |
dismissLabel | string | 'Dismiss announcement' | Dismiss button label. |
Accessibility
- Rendered as a labelled <section> region so it can be found from the landmarks list.
- It is not a live region: content present on load is read in order. For urgent changes after load, use Alert or Toast.
- The dismiss button has an explicit accessible name.
Usage guidelines
Do
- Keep the message to one sentence with one action.
- Remember dismissal across sessions.
Don’t
- Use banners for marketing on every page.
- Show several banners at once.