# Announcement bar (goodtabs UI)

A full-width bar with one message, an optional arrow link and a dismiss button.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/announcement-bar.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/announcement-bar`

## Usage

```tsx
import { AnnouncementBar } from "@/components/ui/announcement-bar"

<AnnouncementBar href="/changelog" linkLabel="See what's new" onDismiss={() => setSeen(true)}>
  goodtabs UI 1.0 is out
</AnnouncementBar>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| children | `ReactNode` |  | The message. Keep it to one line. |
| href | `string` |  | Where the arrow link goes. Omit to hide the link. |
| linkLabel | `string` | `"Learn more"` | Text of the arrow link. |
| onDismiss | `() => void` |  | Adds the dismiss button. Called after the bar hides itself. |
| dismissLabel | `string` | `"Dismiss announcement"` | Accessible name of the dismiss button. |
| variant | `"muted" | "primary"` | `"muted"` | muted sits quietly above a header; primary is the solid version. |

## When to use

- One launch, offer or maintenance notice above the header
- A site-wide message that should be easy to close
- Pointing to a changelog or status page without a modal

## When not to use

- Errors or warnings tied to a form or action, use an inline alert
- More than one message at a time, a bar is for one thing
- Marketing copy that changes often, people learn to ignore it

## Notes for agents

- Client component; a demo or page that passes onDismiss must be a client component too
- Dismissing only hides it for this render. Store the choice (cookie, localStorage) in onDismiss and do not render it next time
- It has no border and no radius, so it sits flush at the top of the page or inside a frame with overflow-hidden
- The link inherits the bar's text colour; on primary it stays primary-foreground

Docs: https://ui.goodtabs.co/components/announcement-bar