# Alert banner (goodtabs UI)

A full-width dismissible banner for page-level state, with an icon and an optional action.

## Install

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

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

## Usage

```tsx
import { AlertBanner } from "@/components/ui/alert-banner"

<AlertBanner tone="error" title="Payment failed." onDismiss={() => {}}>
  We could not charge the card ending 4242.
</AlertBanner>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| tone | `"info" | "success" | "warning" | "error"` | `"info"` | Picks the icon and the spoken prefix. Warning and error use role=alert. |
| title | `string` |  | Bold lead-in, same line as the message. |
| children | `ReactNode` |  | The message. Keep it to one or two lines. |
| action | `ReactNode` |  | One action on the right, usually a ghost sm Button. |
| onDismiss | `() => void` |  | Adds the dismiss button. Called after the banner hides itself. |
| dismissLabel | `string` | `"Dismiss banner"` | Accessible name of the dismiss button. |

## When to use

- Something about the whole page or account needs attention
- An outage, failed sync, expiring trial or read-only mode
- A state that should be easy to dismiss but hard to miss

## When not to use

- Promotions and launches, use the announcement bar
- A problem with one field or one section, use an inline alert
- Confirming a quick action, use a toast

## Notes for agents

- Client component; a demo that passes onDismiss must be a client component too
- Dismissing hides it for this render only; persist the choice in onDismiss if it should stay gone
- No colour carries state: the icon shape and a screen reader prefix do. Only the error icon uses text-destructive
- Different from announcement-bar: this one reports state, has tones, a bottom hairline and an action slot
- It has no radius, so put it flush at the top of the page or inside an overflow-hidden frame

Docs: https://ui.goodtabs.co/components/alert-banner