# Announcement Bar

> A campaign message with actions, dismissal, and remembered dismissal.

- Category: Marketing
- Kind: component
- Page: https://uaiblocks.dev/components/announcement-bar
- Registry item: https://uaiblocks.dev/r/announcement-bar.json
- Source: https://github.com/victor-teles/uai/blob/main/src/registry/uai/components/announcement-bar.tsx

## Install

```bash
bunx shadcn@latest add https://uaiblocks.dev/r/announcement-bar.json
```

## Usage

```tsx
"use client";

import { useState } from "react";
import {
  AnnouncementBar,
  AnnouncementBarAction,
  AnnouncementBarActions,
  AnnouncementBarDismiss,
  AnnouncementBarLabel,
  AnnouncementBarMessage,
  type AnnouncementBarVariant,
} from "@/components/ui/uai/announcement-bar";

const STORAGE_KEY = "uai-preview-announcement-4-2";

export function AnnouncementBarPreview({ variant = "bar" }: { variant?: AnnouncementBarVariant }) {
  const [open, setOpen] = useState(true);
  return (
    <div style={{ display: "grid", gap: 12 }}>
      <AnnouncementBar
        variant={variant}
        open={open}
        onOpenChange={setOpen}
        storageKey={STORAGE_KEY}
      >
        <AnnouncementBarLabel>New</AnnouncementBarLabel>
        <AnnouncementBarMessage>
          Shared workspaces are now included on every plan.
        </AnnouncementBarMessage>
        <AnnouncementBarActions>
          <AnnouncementBarAction href="#release-notes" onClick={(event) => event.preventDefault()}>
            Read release notes
          </AnnouncementBarAction>
          <AnnouncementBarDismiss />
        </AnnouncementBarActions>
      </AnnouncementBar>
      {open ? null : (
        <button
          type="button"
          onClick={() => {
            window.localStorage.removeItem(STORAGE_KEY);
            setOpen(true);
          }}
          style={{
            justifySelf: "center",
            height: 28,
            padding: "0 12px",
            border: 0,
            borderRadius: 999,
            background: "var(--uai-surface-raised)",
            color: "var(--uai-text)",
            fontSize: 12.5,
            fontWeight: 500,
            cursor: "pointer",
          }}
        >
          Show the announcement again
        </button>
      )}
    </div>
  );
}
```

## Anatomy

- `AnnouncementBar`
  - `AnnouncementBarLabel`
  - `AnnouncementBarMessage`
  - `AnnouncementBarActions`
    - `AnnouncementBarAction`
    - `AnnouncementBarDismiss`

## Accessibility

- The bar is a region labelled by its message, so assistive technology can find and skip it.
- Dismiss is a 28px button with an accessible name; dismissal does not move focus, and actions stay in normal tab order.
- Pass storageKey to remember dismissal in localStorage, or control open with onOpenChange. Campaign scheduling stays consumer-owned.