# Alert

> An inline message in a tone (info, success, warning, danger) or a quiet legal box for fixed wording, with an action and dismiss.

Category: Feedback. Docs page: https://rime.mjsons.net/components/alert

## Installation

```bash
npx shadcn@latest add KezLahd/rime/alert
```

Alert sits in the flow of a page or form. It carries a title, body, an action (a retry), a badge and an optional reference code for approved wording. live makes it announce when it appears.

## Usage

```tsx
import { Alert } from "@/components/ui";

<Alert tone="warning" title="Payment is processing">We will email you when the bank confirms it.</Alert>
```

## Props: Alert

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` (required) | `AlertTone` |  |  |
| `title` | `ReactNode` |  |  |
| `children` | `ReactNode` |  |  |
| `action` | `ReactNode` |  | A button or link on the right (desktop) or below (mobile). |
| `icon` | `ReactNode \| false` |  |  |
| `badge` | `ReactNode` |  | Small uppercase tag before the title: "Cold chain", "Awaiting MLR". |
| `jobCode` | `string` |  | legal only: the approval job code, set in mono under the copy. |
| `live` | `boolean` |  | Announce on appearance. Use for banners that appear in response to an action (a failed save), not for ones present on page load. |
| `onDismiss` | `() => void` |  |  |
| `className` | `string` |  |  |

## Examples

### Tones

```tsx
<Alert tone="info" title="Heads up">…</Alert>
<Alert tone="danger" title="Couldn't save" action={<Button size="sm" variant="secondary">Try again</Button>} />
```

## Theme tokens

Per-component tokens. Undeclared by default: the default below is the fallback the CSS uses. Set any of them at :root or on a wrapper to restyle every instance.

| Token | Default |
| --- | --- |
| `--alert-radius` | `var(--r-md)` |

System tokens it reads: `--blur-callout`, `--border-w`, `--danger-fill`, `--danger-ink`, `--danger-line`, `--density`, `--focus-ring`, `--font-mono`, `--info-ink`, `--ink-body`, `--ink-heading`, `--ink-muted`, `--line-brand`, `--r-2xs`, `--r-md`, `--r-xs`, `--rgb-brand`, `--rgb-brand-deep`, `--rgb-support`, `--rgb-support-deep`, `--rgb-white`, `--success-fill`, `--success-ink`, `--success-line`, `--text-body`, `--text-micro`, `--text-small`, `--warning-fill`, `--warning-ink`, `--warning-line`.

## Accessibility

- live renders role="alert" (danger and warning) or role="status" (the rest); without live it is plain content, so it is not re-announced on every render.

## Do

- Say what happened and what to do next.

## Don't

- Don't use an Alert for transient confirmation; that is a toast.