# Banner

> A one-line announcement as a floating card or a full-width bar, with an icon, actions and a close button.

URL: https://apogee.avaui.dev/docs/sections/banner
Last updated: 2026-10-15

A one-line announcement as a floating card or a full-width bar, with an icon, actions and a close button.

Last updated October 15, 2026

Uses JavaScript

The close button removes the banner through [Dismissible](https://apogee.avaui.dev/docs/dismissible).

**Without JS:** The close button is hidden and the banner stays.

```astro
<Banner heading="We've just raised our Series A" description="Read the note from our founders." inline>
<FeaturedIcon slot="icon" theme="outline" color="neutral" size="small"><Sparkles /></FeaturedIcon>
<Button slot="actions" href="#" size="small" variant="outline" color="neutral">Read update</Button>
</Banner>
```

Ready-made blocks built on it: [Banner sections](https://apogee.avaui.dev/docs/banner-sections).

## Add

```sh
npx @ava-ui/apogee add banner
```

Pulls in Dismissible, CloseButton, Container and the shared section helpers.

## API

| Prop | Type | Default | Category | Description |
| --- | --- | --- | --- | --- |
| `heading` | `string` | — | content | Required. The one-line message; it also names the banner region. |
| `description` | `string` | — | content | A quieter second line. Put it in the default slot instead when it holds a link. |
| `layout` | `'floating' \| 'full-width'` | `'floating'` | layout | A card inset from the edges, or a bar with the content in the page container. |
| `background` | `'page' \| 'neutral-faded' \| 'primary-faded' \| 'primary' \| 'inverted'` | `'neutral-faded'` | layout | The fill. On `primary` and `inverted` the text and close button take the on-colour. |
| `align` | `'start' \| 'center'` | `'start'` | layout | `center` centres the text and actions from `md`. |
| `inline` | `boolean` | `false` | layout | Heading and description on one line from `lg`. |
| `fixed` | `boolean` | `false` | layout | `floating` only: pinned to the bottom of the viewport. |
| `dismissible` | `boolean` | `true` |  | Show the close button. |
| `closeLabel` | `string` | `'Dismiss'` | content | The close button’s name. |
| `id` | `string` | auto |  | Root id; the heading gets `{id}-heading`. |

## Slots

| Slot | What goes in it |
| --- | --- |
| `icon` | A FeaturedIcon or a bare Lucide icon, before the text. |
| default | The description when it holds a link. |
| `actions` | Buttons, an email form, a Countdown. |

## Variants

`layout` × `background`:

```astro
<Banner heading="…" description="…" />
<Banner background="primary" heading="…" description="…" />
<Banner layout="full-width" heading="…" description="…" />
<Banner layout="full-width" background="primary" heading="…" description="…" />
```

Every other `background`:

```astro
<Banner background="page" … />
<Banner background="primary-faded" … />
<Banner background="inverted" … />
```

`align="center"` with `inline`, a link in the line, and a Countdown:

```astro
<Banner align="center" inline heading="We've just launched a new feature">
Check out the <Link href="#" color="neutral">new dashboard</Link>.
</Banner>
<Banner align="center" inline heading="30% off annual plans ends soon" description="Lock in your price today.">
<Countdown slot="actions" to="2026-12-31T23:59:59Z" />
</Banner>
```

## States

-   **Dismissed** — the close button removes the banner from the page (the `apogee:dismiss` event fires first and can be cancelled).
-   **Not dismissible** — `dismissible={false}` drops the button, for a notice that must stay.

```astro
<Banner dismissible={false} heading="Scheduled maintenance on Sunday, 02:00–04:00 UTC" />
```

## Examples

Pinned to the bottom of the viewport (shown here in flow):

```astro
<Banner fixed heading="We use cookies" description="Read our cookie policy.">…</Banner>
```

More in [Banner sections](https://apogee.avaui.dev/docs/banner-sections).

## Accessibility

-   The banner is a `region` named by its heading, so it appears in a screen reader’s landmark list.
-   The close button is a real `<button>` named “Dismiss” (`closeLabel`); it hides without JS.
-   On phones the close button sits in the top corner and the text keeps clear of it.

## Tokens

Reads the Section background tokens and on-colours (see [SectionHeader](https://apogee.avaui.dev/docs/section-header)), `--border-neutral` for the edge and `--shadow-raised` for the floating card.

## Do / Don’t

-   **Do** keep it to one line and one or two actions.
-   **Don’t** stack several banners; show the most important one.

## Content

-   Lead with the news, not the brand: “We’ve just launched a new feature”.
-   Put the link on the words that say where it goes.

## Related

[

DismissibleWrap anything with a close button, with an optional auto-dismiss timeout.

](https://apogee.avaui.dev/docs/dismissible)[

CountdownThe time left until a date, as boxed numbers with unit labels, ticking every second.

](https://apogee.avaui.dev/docs/countdown)[

Close buttonThe ✕ every dismissible surface shares, in four sizes and an over-media theme.

](https://apogee.avaui.dev/docs/close-button)