# Alert

> A notice that stays on the page until it is dealt with: partial data, a connection that needs attention, rows that could not be read. A Toast leaves on its own and a ChromeMessage takes the page. The status is in an icon tile and the corner glow, never a colored edge, and each has its own shape. An error is announced at once; the rest waits its turn.

Section: Feedback. Docs: https://entrepta.vercel.app/docs/components/alert

## Install

```bash
npx @entrepta/cli@latest add alert
```

Files: `feedback/alert.tsx`, `lib/icon.tsx`, `primitives/icon-tile.tsx`, `lib/overlay.ts`.
npm packages: `@phosphor-icons/react`, `class-variance-authority`.
Comes with: `icon-lib`, `icon-tile`, `overlay-lib`.

## Usage

```tsx
import { Alert } from "@/components/entrepta/alert"

<Alert tone="warning" title="Partial data" action={<ArrowLink href="/sync">sync now</ArrowLink>}>
  Two accounts have not synced today.
</Alert>

<Alert tone="error" title="The import stopped" onDismiss={() => setOpen(false)}>
  Row 14 has no date. Fix it and import again.
</Alert>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` | `"info" \| "success" \| "warning" \| "error"` | "info" | error is role=alert and interrupts; the rest are role=status |
| `title / children` | `ReactNode` | - | What happened, then the detail and the next step |
| `action` | `ReactNode` | - | An ArrowLink or a Button |
| `onDismiss / dismissLabel` | `() => void / string` | - | Only for a notice that can be put away |