Banner

A Banner is a wide, prominent notice for the top of a page: a new release, a migration deadline, a deprecation. It is louder than a callout, which sits inline with the prose; a banner announces.

Basic

<Banner icon="rocket">
**Readsmith 0.13** is here. See the [changelog](/changelog).
</Banner>

The icon is a name from the bundled Lucide set, resolved to inline SVG at build time.

Variants

A variant tints the banner with a semantic color; the default is the site's accent.

<Banner variant="warning" icon="triangle-alert">
The legacy config format is deprecated...
</Banner>

Available variants: info, tip, warning, danger, accent.

Dismissible

Add dismissible and the banner gets a close control. Once a reader dismisses it, it stays dismissed, keyed by its content, so the same announcement does not reappear as they move between pages, and a new announcement (new text) shows again.

<Banner variant="tip" icon="megaphone" dismissible>
Join the community call this Thursday.
</Banner>

A plain banner ships zero JavaScript; only a dismissible one adds the small script that remembers the reader's choice.

Props