Banner

A full-width notice for an announcement, status change, or promotion. Banner renders an <a-banner> with message, optional children, actions, and a dismiss control. Content starts at the inline edge; pass align="center" to center it (Align). closable defaults to true.

Banner is borderless. Set border-bottom-width for a rule or border-width for an outline (Styling).

Tone

Pick a semantic tone to tint the surface and text together — and the ✕ adopts the same tone (it also sets the border color, used if you opt into a border). The set matches Expander / Tag: neutral (the default) plus brand, info, success, warning, and critical. Color comes from the theme tokens, so every tone tracks light and dark mode automatically.

<Banner tone="neutral" message="Neutral — a plain notice." />   {/* neutral is the default */}
<Banner tone="brand" message="Brand — a product announcement." />
<Banner tone="info" message="Info — a new release is available." />
<Banner tone="success" message="Success — your changes were saved." />
<Banner tone="warning" message="Warning — your trial ends in 3 days." />
<Banner tone="critical" message="Critical — the last deploy failed." />

tone also accepts any literal CSS color for a one-off tint — the hue is kept while lightness and chroma are pinned to the named-tone curve (and re-tuned for dark mode), the same mechanism as Expander / Tag:

<Banner tone="#ff1493" message="…" />
<Banner tone="rebeccapurple" message="…" />

Round

round rounds the corners for a standalone banner that floats inside a container, rather than the edge-to-edge strip. It stays borderless (add border-width for an outline). Bare round clamps to a stadium (half the height); pass a number (px) or a CSS length string for a custom radius.

<Banner round tone="info" message="A rounded, standalone banner." />
<Banner round={12} tone="success" message="A custom 12px radius." />

Align

align places the content row. start (the default) aligns it to the inline edge and reserves space for the dismiss control. center centers it in the bar. Wrapped message text follows the selected alignment.

<Banner tone="info" message="Start-aligned content." /> {/* start is the default */}
<Banner align="center" tone="info" message="Centered content." />

The layout follows direction: rtl.

Message and content

message is the leading content: a string at the banner type scale or any node. children sit between the message and actions, for example a chip, link, or secondary line.

<Banner tone="info" message="Deployment complete.">
  <Text size="small" priority="tertiary">· 2 minutes ago</Text>
</Banner>

Actions

Pass actions to render trailing controls — buttons, links — as a compact row after the message and children. Keep them small; the banner is a single line. Give each action the banner’s tone so the controls read as part of the strip.

<Banner
  tone="brand"
  message="Upgrade to Pro for unlimited runs."
  actions={<Button size="small" priority="secondary" tone="brand" label="Upgrade" />}
/>

Stack several actions by priority in one banner: a primary call to action, a secondary alternative, and a low-emphasis tertiary choice, all sharing the banner’s tone.

<Banner
  tone="info"
  message="A new version is ready to install."
  actions={
    <>
      <Button size="small" priority="primary" tone="info" label="Update now" />
      <Button size="small" priority="secondary" tone="info" label="Release notes" />
      <Button size="small" priority="tertiary" tone="info" label="Later" />
    </>
  }
/>

Dismiss

A banner is closable by default: a full-height ✕ on the right edge dismisses it. It rests dimmed and brightens when you hover or focus it (the Input dim-actions affordance). On dismiss the bar collapses its height and fades out, clipped to the box (instant under prefers-reduced-motion).

Leave it uncontrolled and the banner hides itself when the ✕ is clicked (try it):

{/* uncontrolled — the ✕ self-dismisses */}
<Banner tone="success" message="Dismiss me — I'll disappear." />

Set closable={false} to drop the built-in ✕ — for a permanent banner, or when you drive dismissal from your own control.

<Banner tone="warning" message="A permanent notice — no dismiss button." closable={false} />

Dismiss from an action

Give any control inside the banner data-banner-dismiss and it dismisses the banner on click, through the same state contract as the ✕ — for an action that closes the banner as it runs (an “Undo”, a “Got it”). Try it:

<Banner
  tone="success"
  message="Draft saved."
  actions={<Button size="small" priority="secondary" tone="success" label="Undo" onClick={undo} data-banner-dismiss />}
/>

It’s matched by presence on the nearest banner, so it works on any activated control — Button, a plain <a>, or a MenuItem inside a dropdown — and from the keyboard, since Enter/Space activation is a real click. Put it on the terminal control, not a dropdown trigger (which would dismiss the banner as the menu opens):

<Banner
  message="Export ready."
  actions={
    <Menu trigger={<Button size="small" label="Download" iconTrailing="chevron-down" />}>
      <MenuItem label="As CSV" onClick={csv} data-banner-dismiss />
      <MenuItem label="As JSON" onClick={json} data-banner-dismiss />
    </Menu>
  }
/>

In controlled mode the click requests a dismiss like the ✕ does — drive the result through dismissed (below).

Controlled vs uncontrolled

Dismissal follows Anta’s shared state contract. For uncontrolled use, pass defaultDismissed; clicking ✕ then dismisses the banner. For controlled use, pass dismissed and onDismiss. The banner follows dismissed and reports a dismissal request when ✕ is clicked. Update dismissed to accept the request, or leave it unchanged to reject it. The wrapper uses booleans, while the element uses a state string (closed means dismissed):

Controlling it is how you persist a dismissal (write it to storage) or re-show the banner later. The element never self-applies in controlled mode: set dismissed to true to accept the request, or do nothing to reject.

// controlled — persist the dismissal across reloads
const [hidden, setHidden] = useState(() => localStorage.getItem('release-banner') === 'hidden')
<Banner
  tone="info"
  message="A new release is available."
  dismissed={hidden}
  onDismiss={() => {
    setHidden(true)
    localStorage.setItem('release-banner', 'hidden')
  }}
/>

At the element level statechange is cancelable and fires before the banner applies anything, so a vanilla <a-banner> listener can preventDefault() a dismiss. The <Banner> wrapper’s onDismiss is notification-only — drive rejection through dismissed instead.

<a-banner role="status" tone="info">
  <a-banner-message slot="message">A new version is ready to install.</a-banner-message>
  <a-button slot="actions" role="button" tabindex="0" size="small" priority="primary" tone="info">
    <a-button-label>Update now</a-button-label>
  </a-button>
  <a-button slot="close" role="button" tabindex="0" priority="quaternary" tone="info"
    aria-label="Dismiss" data-custom-event="dismissrequest"><a-icon shape="x" aria-hidden="true"></a-icon></a-button>
</a-banner>

<Banner tone="#e0457b" message="Custom" />

<Banner tone="info" message="A rule under the strip." style={{ borderBottomWidth: 1 }} />
<Banner round tone="success" message="A full outline on a round banner." style={{ borderWidth: 1 }} />

<Banner tone="info" message="A taller bar." style={{ minHeight: 56 }} />