Banner | Bearnie

Bearnie 1.0 is out — 50+ Astro components, no framework runtime.Read the docs

<Banner>
  <span>Bearnie 1.0 is out — 50+ Astro components, no framework runtime.</span>
  <a href="/docs" class="font-medium underline underline-offset-2">Read the docs</a>
</Banner>

Installation

npx bearnie add banner

Usage

import { Banner } from "@/components/bearnie/banner"

<Banner id="launch-2026" dismissible>
  <span>We just launched!</span>
  <a href="/blog/launch" class="font-medium underline underline-offset-2">Read more</a>
</Banner>

By default the banner renders in flow — place it at the top of your layout, above the header. Use position and floating for viewport-pinned layouts. When both id and dismissible are set, dismissing is remembered in localStorage — the banner stays hidden on future page loads, without any flash before hiding.

Examples

Dismissible

Without an id the dismissal lasts for the current page only — good for previews and testing. Add an id in production to persist it.

Black Friday: 30% off all licenses with code BEAR30.

<Banner dismissible>
  <span>Black Friday: 30% off all licenses with code BEAR30.</span>
</Banner>

Muted variant

Scheduled maintenance on Sunday, 02:00–04:00 UTC.

<Banner variant="muted" dismissible>
  <span>Scheduled maintenance on Sunday, 02:00–04:00 UTC.</span>
</Banner>

Floating at the bottom

floating detaches the banner from the viewport edge with margins, rounded corners, and a shadow. It pins to the bottom by default; the previews below contain it in a frame, but on your site it pins to the browser viewport.

BearConf 2026 · Join us in Stockholm from June 7 – 9 to see what’s coming next →

<Banner variant="dark" floating dismissible>
<span><strong>BearConf 2026</strong> · Join us in Stockholm from June 7 – 9 to see what's coming next →</span>
</Banner>

Floating centered

With align="center" the banner shrinks to its content and centers itself.

BearConf 2026 · Tickets are live →

<Banner variant="dark" floating align="center" dismissible>
<span><strong>BearConf 2026</strong> · Tickets are live →</span>
</Banner>

Privacy notice with actions

Use the actions slot for button rows. With align="end" (or "start") and the outline variant the banner becomes a corner notice card; constrain the width with a class so the text wraps.

This website uses cookies to supplement a balanced diet and provide a much deserved reward after consuming bland but nutritious meals. See our cookie policy.

<Banner floating align="end" variant="outline" class="max-w-sm">
<p>
  This website uses cookies to supplement a balanced diet and provide a much
  deserved reward after consuming bland but nutritious meals. See our
  <a href="#" class="font-medium underline underline-offset-2">cookie policy</a>.
</p>
<Fragment slot="actions">
  <Button size="sm">Accept all</Button>
  <Button size="sm" variant="ghost">Reject all</Button>
</Fragment>
</Banner>

Pinned to the top

position="top" (or "bottom") pins the full-width bar to the viewport edge without floating.

We use minimal analytics. No cookies, no tracking.

<Banner variant="dark" position="top" dismissible>
<span>We use minimal analytics. No cookies, no tracking.</span>
</Banner>

Props

Prop	Type	Default	Description
id	string	-	Unique id; when set, dismissal is persisted in localStorage
dismissible	boolean	false	Show a dismiss button
variant	“default” \| “muted” \| “dark” \| “outline”	“default”	Visual style — `dark` inverts the theme tokens, `outline` is a bordered card on the page background
position	“static” \| “top” \| “bottom”	“static”	In flow, or pinned to a viewport edge
floating	boolean	false	Detach from the edge with margins, rounded corners, and a shadow (pins to the bottom unless `position="top"`)
align	“stretch” \| “start” \| “center” \| “end”	“stretch”	Floating only: span the width, or shrink to content and place it
class	string	-	Additional CSS classes

Slots

Slot	Description
default	Banner content
actions	Button row, e.g. accept/reject for privacy notices

Events

The banner dispatches a bubbling banner-dismiss CustomEvent when dismissed.