# Alert

> A message that sits in the page: its tint, line and icon ease when the tone changes, and dismissing folds it away so the content below slides up.

Inline alerts usually change tone by swapping a whole new box in, and vanish on dismiss so everything below jumps up. Here the tint, hairline and icon ease from one tone to the next (the icon swapping through a blur), and the ✕ folds the alert away: it lifts and fades while its height closes.

## Install

```bash
npx shadcn@latest add https://hairlineui.com/r/alert.json
```

Needs React 19, Tailwind CSS v4 and shadcn/ui theme variables (any style, light and dark). Icons from lucide-react.

- npm: none
- Hairline UI components it needs (the CLI installs them too): `ui-interaction-motion`
- Docs and live preview: https://hairlineui.com/ui/alert
- Registry item (source): https://hairlineui.com/r/alert.json

## Usage

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

<Alert tone="warning" title="Your card expires on 30 November" action={<button>Update</button>} onDismiss={() => {}}>
  Update it to keep All access.
</Alert>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` | `"info" \| "success" \| "warning" \| "danger"` | `"info"` | Colour and icon. |
| `title` | `ReactNode` | – | First line. |
| `children` | `ReactNode` | – | Details. |
| `action` | `ReactNode` | – | A button or link. |
| `onDismiss` | `() => void` | – | Shows ✕; called after it has folded. |
| `hidden` | `boolean` | – | Fold it away without unmounting. |
| `icon` | `ReactNode` | – | Replace the tone icon. |

## States

- **tone change**: Background, line and icon colour ease; the icon swaps through a 3px blur.
- **dismiss**: Lifts 6px and fades (220ms) while the height folds (380ms).

## What it handles

An alert that pops in and out drags the page with it; this one folds.

- **Tone transitions**: Tint, line and icon ease (300ms).
- **Folding dismissal**: Height closes (380ms, 80ms after the fade) so content slides up.
- **Right role**: role="alert" for warning and danger, "status" otherwise.
- **Responsive action**: Beside the text on wide cards, under it on narrow ones.

## Replaces

callout, banner, inline notification

## Where it fits

- **Billing**: A card is about to expire, with Update.
- **Sync and imports**: "Syncing" turning into "Synced" in place.
- **Forms**: A summary of what needs fixing.
- **Announcements**: A dismissible note at the top of a settings page.

## Notes

- Reduced motion: changes and dismissal happen in place.
- Folded alerts are inert, so focus can't land in them.

License: MIT (https://hairlineui.com/license#components)