Feedback · astro-ui · BannerNew

Banner

Full-width announcement strip with icon, actions, and dismissal hook.

Banner is the page-level sibling of Alert: a strip that spans its container instead of sitting inside a card. Use it for release notes, trial notices, or maintenance windows that belong above the content. It renders as a named region landmark by default, so the announcement is reachable from a screen reader’s landmark list; pass role="none" when several banners stack on one page.

← All components

Features

6 variants: primary, info, success, warning, destructive, neutral
Slots for icon, title, message, and an action row
Optional sticky placement for top-of-page announcements
Responsive: actions wrap under the message on narrow screens
Closable affordance with a `data-banner-close` hook — zero JS

Usage

---
import { Banner, Button } from "astro-ui";
---

<Banner variant="info" closable>
  <span slot="icon" aria-hidden="true">✦</span>
  <strong>v2.5 is out.</strong> Timeline and Banner have landed.
  <Button slot="actions" size="sm" variant="outline">Read the notes</Button>
</Banner>

Demos

Release announcement

<Banner variant="info">
  <span slot="icon" aria-hidden="true">✦</span>
  <strong>v2.5 is out.</strong> Timeline, Banner, and Menu are here.
  <Button slot="actions" size="sm" variant="outline">Read the notes</Button>
</Banner>

Dismissible trial notice

<Banner variant="primary" closable>
  <strong>14 days left in your trial.</strong> Add a payment method to keep your projects online.
  <Button slot="actions" size="sm" variant="secondary">Choose a plan</Button>
</Banner>

Sticky maintenance strip

<Banner variant="warning" sticky closable closeLabel="Dismiss maintenance notice">
  <span slot="icon" aria-hidden="true">⏳</span>
  Scheduled maintenance on Oct 24, 02:00–04:00 UTC. Deploys will queue.
</Banner>

Neutral sub-header note

<Banner variant="neutral" role="none">
  <span slot="icon" aria-hidden="true">ℹ</span>
  You are viewing the staging environment. Changes are not public.
</Banner>

API

Props

Prop	Type	Default	Description
`variant`	`"primary" \| "info" \| "success" \| "warning" \| "destructive" \| "neutral"`	`"primary"`	Color treatment of the strip.
`sticky`	`boolean`	`false`	Stick to the top of the scroll container.
`closable`	`boolean`	`false`	Render a close button with a data hook.
`closeLabel`	`string`	`"Dismiss announcement"`	Accessible name for the close button.
`role`	`"region" \| "status" \| "alert" \| "none"`	`"region"`	Landmark role; "none" drops it.
`class`	`string`	`—`	Merged via cn(); Tailwind classes welcome.
`id`	`string`	`—`	Element id.
`ariaLabel`	`string`	`—`	Accessible name.

Slots

Slot	Description
`icon`	Leading glyph (rendered aria-hidden).
`title`	Optional bold first line.
`(default)`	The message itself.
`actions`	Buttons or links on the trailing edge.

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

FAQ

How do I dismiss a banner?

Listen for a click on `[data-banner-close]` and hide the element yourself — that keeps persistence (cookie, localStorage, server flag) in your hands. The Dismissible demo does exactly this with one delegated listener.

Banner or Alert?

Alert is a boxed message inside content. Banner spans its container and usually sits above the page, at the top of the layout.

Changelog

Version history mentioning Banner.

v0.1.0 — 2026-11-11

added

Feedback (6): Alert, Spinner, Skeleton, Toast, Banner, NotificationCenter.