# Notice card (goodtabs UI)

An inline notice with an icon, a title, a body, one action and a dismiss button.

## Install

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

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

## Usage

```tsx
import { Button } from "@/components/ui/button"
import { NoticeCard } from "@/components/ui/notice-card"

<NoticeCard tone="warning" title="Your key expires in 3 days" onDismiss={() => setOpen(false)} action={<Button variant="ghost" size="sm">Rotate key</Button>}>
  Requests will fail once it expires.
</NoticeCard>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| tone | `"info" | "warning" | "error" | "success"` | `"info"` | Picks the icon and the sr-only prefix. No colour changes. |
| title | `string` |  | The first line. |
| children | `ReactNode` |  | The body, under the title. |
| action | `ReactNode` |  | One action under the body, usually a ghost sm Button. |
| onDismiss | `() => void` |  | Shows the dismiss button and is called when pressed. |
| dismissLabel | `string` | `"Dismiss"` | Accessible name of the dismiss button. |

## When to use

- A message that belongs to the page or a section, not to a single action
- Setup hints, limits reached, expiring keys, a build that failed
- Anything the person should read once and can dismiss

## When not to use

- Feedback for an action just taken; use a toast
- Something that blocks the page; use a dialog
- Field errors; show them under the field

## Notes for agents

- Server component unless onDismiss is passed; then render it from a client component, as the dismissible demo does
- Monochrome on purpose: tone swaps the icon and a sr-only prefix (Warning: ...), never a colour
- action is a slot: pass a ghost sm Button so it aligns with the title; the slot pulls it 10px left for that
- It does not manage its own visibility; keep the open state in the parent and unmount it on dismiss

Docs: https://ui.goodtabs.co/components/notice-card