# Error Alert

Error Alert [#error-alert]

The **Error Alert** is a compact, dismissible error surface with an optional
retry action. It renders a `role="alert"` region with the message, a **Retry**
button (shown only when you pass `onRetry`), and a dismiss control. It is the
single, deduplicated alert used across blocks for operation feedback.

> **Presentational.** The alert owns no operation state — you decide what retry
> and dismiss do. Wire it to any hook that surfaces an error string (e.g.
> `useGenerateText`, `useClassify`, `useTranslate` — a recommendation, never a
> requirement).

**When to use it:** any place a local operation can fail and the user should be
able to retry or dismiss the message inline, near the affected result.

Preview [#preview]

```tsx
'use client';

import { useState } from 'react';

import { ErrorAlert } from '@/components/error-alert';

/**
 * Demo for ErrorAlert, used by the docs live preview. A dismissible alert with
 * a working retry — dismissing hides it, "Trigger error" brings it back.
 */
export default function ErrorAlertDemo() {
  const [visible, setVisible] = useState(true);
  const [count, setCount] = useState(0);

  if (!visible) {
    return (
      <button
        type="button"
        onClick={() => setVisible(true)}
        className="rounded-md border border-border px-3 py-1.5 text-xs font-medium hover:bg-muted"
      >
        Trigger error
      </button>
    );
  }

  return (
    <div className="flex w-full max-w-md flex-col gap-2">
      <ErrorAlert
        message="Model failed to load: the network request timed out."
        onRetry={() => setCount((c) => c + 1)}
        onDismiss={() => setVisible(false)}
      />
      {count > 0 && (
        <p className="text-xs text-muted-foreground">Retry pressed {count}×</p>
      )}
    </div>
  );
}
```

Installation [#installation]

```bash
npx shadcn@latest add @localmode/ui/results/error-alert
```

Dependencies [#dependencies]

* **Data source:** renders the `message` you pass and emits `onRetry` / `onDismiss` — works with any backend. Recommended LocalMode source: any hook's `error` string (optional).
* `lucide-react` — the alert / retry / dismiss icons
* `clsx` + `tailwind-merge` — via the shared `cn()` util (installed automatically as a registry dependency)

Files installed [#files-installed]

* `error-alert.tsx` — the component
* `lib/utils.ts` — the `cn()` helper (if not already present)

Props [#props]

**ErrorAlert**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `message` | `string` | — | **Required.** The error message to display. |
| `onRetry` | `function` | — | Optional retry handler — the Retry button renders only when provided. |
| `onDismiss` | `function` | — | **Required.** Dismiss the alert. |

Examples [#examples]

Retryable operation feedback [#retryable-operation-feedback]

```tsx
import { ErrorAlert } from '@/components/error-alert';

export function Result({ error, run, clear }) {
  if (!error) return null;
  return <ErrorAlert message={error} onRetry={run} onDismiss={clear} />;
}
```

Dismiss-only (no retry) [#dismiss-only-no-retry]

Omit `onRetry` and the Retry button is not rendered:

```tsx
<ErrorAlert message={error} onDismiss={() => setError(null)} />
```

Customization [#customization]

The alert uses `destructive` token utilities so it inherits your theme's error
color. Because you own the copied file, the layout, icon, and button styling are
all yours to change — swap the icons, add an error-code line, or wrap the message
in a `<pre>` for stack traces.