# Banner

> An announcement bar at the top of the page that people can dismiss. It is a named landmark, and it is announced to screen readers only if you turn that on.

Facade UI item `banner` (block, section).
Docs page: https://facadeui.dev/components/banner · Registry JSON: https://facadeui.dev/r/banner.json

## Install

```bash
npx shadcn@latest add @facade/banner
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/banner.json`. The CLI also installs what it needs: lucide-react@^1.47.0, @facade/button, @facade/container, @facade/types, @facade/utils.

Files: `components/sections/banner.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/banner-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
import { Banner } from "@/components/sections/banner"

export function Demo() {
  return (
    <div className="-m-6 flex flex-col gap-6 sm:-m-10">
      <Banner
        label="Announcement"
        dismissible
        action={{ label: "Read the notes", href: "#release" }}
      >
        Facade UI v0.1 is out.
      </Banner>
      <Banner variant="muted" label="Maintenance notice" dismissible>
        Scheduled maintenance on Sunday, 02:00–04:00 UTC.
      </Banner>
      <p className="text-muted-foreground px-6 pb-6 text-sm sm:px-10">
        Dismissal is session-only here. Pass <code>storageKey</code> to remember it.
      </p>
    </div>
  )
}
```

## Props

### BannerProps

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` (required) | `ReactNode` |  |  |
| `label` | `string` | `"Announcement"` | Names the landmark, e.g. "Announcement". |
| `action` | `{ label: string; href: string; external?: boolean }` |  | Optional call to action at the end of the message. |
| `link` | `LinkComponent` |  |  |
| `dismissible` | `boolean` | `false` | Adds a dismiss button. |
| `storageKey` | `string` |  | Remembers the dismissal under this localStorage key. |
| `dismissLabel` | `string` |  | The accessible label of the dismiss button. |
| `variant` | `"primary" \| "muted" \| "card"` | `"primary"` |  |
| `onDismiss` | `() => void` |  |  |
| `announce` | `boolean` | `false` | Announces the banner to screen readers when it appears. Use this only for banners shown in response to an action, never for one that is there when the page loads. |
| `className` | `string` |  |  |
| `id` | `string` |  |  |