Feedback

Banner

A full-width announcement strip: release notes, system status, billing warnings. Stretches across the top of a page or section, with optional action and dismiss.

Tones

Heads up, we're deploying at 14:00 UTC.

All systems operational.

Trial expires in 3 days.

Payment failed: update your card to keep paid plugins active.

With an action

You've used 92 of 100 free entries.

Dismissible

Anyone can close this with the × button.

Leaving

A banner that is dismissed, by its close button or by autoDismiss, fades away as an Alert does.

A status that stays on screen

A banner that reports a result the reader keeps watching, such as a status a poll updates, takes announce. It reads the message out when it appears, and every change to it after, without clearing it.

Deploying: 1 of 3 steps finished.

Which live region it is

The tone and two props decide. Without autoDismiss a danger or warn banner takes role="alert", and a screen reader announces it at once, because the reader has to act.

A banner that reports an outcome, one given autoDismiss or announce, is a polite region. It carries aria-live="polite" and no role, and waits for a pause. Its text arrives two frames after it mounts, and the region is atomic, so a change reads the whole message. A banner given autoDismiss waits whatever its tone, because an announcement that interrupts and then clears itself leaves nothing to act on.

Any other banner states a standing condition and is no live region. A page that shows one, on load or after a client-side navigation, reads nothing out.

API

Prop	Type	Default	Description
`tone`	`'neutral' \| 'brand' \| 'success' \| 'warn' \| 'danger'`	`'brand'`	Visual tone. Its type is StatusTone. "info" is still accepted and resolves to "brand".
`dismissible`	`boolean`	`false`	Render a close button on the right.
`ondismiss`	`() => void`	no default	Fires when the user clicks the close button.
`children` required	`Snippet`	no default	Banner body, centered.
`action`	`Snippet`	no default	Optional right-aligned action.
`class`	`string`	no default	Extra classes on the wrapper.
`autoDismiss`	`number \| boolean`	`false`	Milliseconds before the banner closes itself, or true for the default. Pass it where the banner reports the outcome of a submit.
`announce`	`boolean`	`false`	Read the message out when it appears, and every change to it after, without clearing it. For a result that stays on screen, such as a confirmation that replaces a form or a status a poll updates.