Banner

Banners carry a message in the place the message is about. children is the only required prop and variant tints the bar behind it. Nothing makes a banner go away on its own: it stays until it is dismissed, or until the condition that raised it stops being true and the product stops rendering it.

There is no icon prop, and no icon is drawn from variant. What the component does is space one for you: an <svg> first inside children gets a right margin and is kept from shrinking. Everything else about it — which glyph, which size, whether there is one at all — is the caller’s.

This is why the figure above has three callouts. The drawing it replaced had four, and the icon it named was never in the component.

StyledBanner sets a 40px minimum height and no width, so a banner is as wide as whatever it is put in and full-bleed only where its container is. Inside it, extendContentWidth stretches the content area to the full width of the bar, which matters when children is a layout rather than a sentence — a two-column row inside a banner needs the space that the content area otherwise leaves for the action.

Use a banner for something the reader needs to know while they are looking at this page and can keep working around: a sandbox environment, a plan limit approaching, a change that has taken effect elsewhere. Relevance is positional, so a banner goes near the top of the page or section it concerns, not at the top of the app.

A banner raised for something minor or repetitive teaches the reader to ignore the next one, including the one that mattered. For a small inline status marker use a Sticker or a Badge; for guidance a reader needs while filling in a field, use that field’s helper text.

Four, and each is a color: informational (purple, the default), success (green), warning (yellow) and alert (red).

Only the background changes between the four. There is no icon, no heading and no prefix, so a reader who does not distinguish yellow from purple is reading the same sentence in both cases — as is anyone who meets the message as text, in a screen reader or in a plain-text export. If the banner is a warning, the first clause says what is at risk.

action takes a string or an element. A string renders a text button that calls onClose — and only calls it, which is why a string action with no onClose renders nothing at all. An element renders as is, and then onClose is ignored for that slot and dismissal is wired inside the element.

action is a single slot, and the dismiss button shares it: onClose draws the X only while action is absent. So a banner has exactly one control, and choosing the action means choosing not to have a dismiss button. Beyond that one control, nothing in a banner is operable.

A banner with neither cannot be dismissed at all, which is a reasonable state — it means only the condition that raised it can clear it.

Every banner is role="alert", which is an assertive live region: it interrupts a screen reader mid-sentence to read the banner out. Three of the four variants are rarely urgent, so the interruption is usually wrong. Passing aria-live="polite" fixes it, and passing it works because the component spreads your props after its own role, so what you set wins.

The close button arrives named “Close”, as both an aria-label and a title.