Banner
A one-line announcement as a floating card or a full-width bar, with an icon, actions and a close button.
Last updated
Uses JavaScript
The close button removes the banner through Dismissible.
Without JS: The close button is hidden and the banner stays.
Show codeHide code
<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.
Add
npx @ava-ui/apogee add bannerPulls 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:
Show codeHide code
<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:
Show codeHide code
<Banner background="page" … />
<Banner background="primary-faded" … />
<Banner background="inverted" … />align="center" with inline, a link in the line, and a Countdown:
Show codeHide code
<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:dismissevent fires first and can be cancelled). - Not dismissible —
dismissible={false}drops the button, for a notice that must stay.
Show codeHide code
<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):
<Banner fixed heading="We use cookies" description="Read our cookie policy.">…</Banner>More in Banner sections.
Accessibility
- The banner is a
regionnamed 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), --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.