/// Feedback

Banner

A full-width tinted notice band for page- or section-level status, with optional action and dismiss.

import { Banner } from "@protocore/pds";

View as Markdown

Basics

A tone, a title, and body copy as children. It spans the full width of its container — mount it at the top of a page or section.

Tones

Each status tone sets the tint and left rule. Add a leading icon to reinforce urgent tones like danger.

Action and dismiss

Pass an action for the one thing the user can do about it, and set dismissible (or pass onDismiss) to let them close it. The Banner manages its own open state.

When to use it

Use a Banner for a persistent, surface-wide condition the user should notice but that doesn't block them: scheduled maintenance, a degraded region, unclaimed rewards, a trial about to expire.

Loading the surface *failed* and there's nothing to show? That's an ErrorState, which replaces the content rather than sitting above it.
Tied to a single field or row? Use an InlineMessage.
A note in the reading flow? Use a Callout.
A fleeting confirmation of an action? Use a Toast.

Keep banners rare — a page stacked with them trains users to ignore all of them.

Usage

Use it for persistent, page- or section-level conditions.
Give it a single, clear `action` when there's something to do.
Make it `dismissible` when the notice is non-critical.
Add a leading icon to reinforce urgent tones.

Don't

Stack several banners — collapse them or prioritize one.
Use a Banner for transient action feedback — that's a Toast.
Make a blocking error dismissible, hiding the problem.
Bury a critical, non-dismissible condition below the fold.

Accessibility

Keys	Action
`Tab`	Reaches the action control, then the dismiss (×) button, when present.
`Enter / Space`	Activates the focused action or dismiss button.

The root is `role="status"` (polite live region) — appropriate for informational notices; it isn't announced assertively.
For a blocking, must-read error, prefer an ErrorState (`role="alert"`) over a Banner.
The dismiss button has an accessible label (`dismissLabel`, default "Dismiss") since its glyph is a bare ×.
The leading `icon` is decorative and `aria-hidden`; the title and body carry the message.

`Banner` props

Prop	Type	Default	Description
`action`	`ReactNode`	—	Trailing action slot (e.g. a Button).
`children`	`ReactNode`	—	Body copy (also accepted via `children`).
`className`	`string`	—
`dismissible`	`boolean`	`false`	Show a dismiss (×) button.
`dismissLabel`	`string`	`Dismiss`	Accessible label for the dismiss button.
`icon`	`ReactNode`	—	Optional leading icon.
`onDismiss`	`(() => void)`	—	Called when the banner is dismissed; its presence also shows the × button.
`style`	`CSSProperties`	—
`title`	`ReactNode`	—	Bold headline line.
`tone`	`enum`	`info`	Status tone; drives the tint background and left rule.