# Alert (/docs/alert)

A semantic status message with tone variants and composable content.

## Install

```bash
npx shadcn@latest add https://4af.selfsimilar.dev/r/alert.json
```

## Usage

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

<Alert variant="success">Changes saved.</Alert>
<Alert variant="loading">Checking availability…</Alert>
```

## API

**Main export:** `Alert`

An inline status line: a glyph and a sentence, with no surface, border, or padding. It renders
nothing for an empty message.

## Variants

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

<Alert>Could not save your changes.</Alert>
<Alert variant="warning">Sending will notify all 240 members.</Alert>
<Alert variant="success">Changes saved.</Alert>
<Alert variant="info">We'll only use this to send receipts.</Alert>
<Alert variant="loading">Checking availability…</Alert>
```

| Variant | Ink | Glyph | Announced as |
| --- | --- | --- | --- |
| `error` (default) | Destructive red | Octagonal alert | `role="alert"` |
| `warning` | Amber accent | Lucide triangle | `role="status"` |
| `success` | Success green | Lucide check | `role="status"` |
| `info` | Foreground ink | Lucide info | `role="status"` |
| `loading` | Muted grey | Shared loader (`AsciiLoader` by default) | `role="status"` |

The inks match Badge's status colours. The loading glyph is hidden from assistive technology, so
only the sentence is announced.

The glyph sits in the same 14px slot in every variant, so changing variant does not shift the
text. `loader={<MySpinner />}` overrides
[LoaderProvider](/docs/reference/engineering#shared-loading-indicators).

## Field errors

Use [Badge](/docs/badge) for a status on a row. When an alert describes a field, connect them:

```tsx
<Input
  aria-invalid={Boolean(error)}
  aria-describedby={error ? "email-error" : undefined}
/>
<Alert id="email-error">{error}</Alert>
```