# Alert

A callout that asks for attention without taking over the page. Card, Inline and Banner in six tones.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/alert
```

## Usage

```tsx
import { Alert } from '@/components/fetaui/alert'

export function Example() {
  return <Alert tone="warning" title="Your plan expires in 3 days" dismissible />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| variant | card, inline, banner | card |
| tone | neutral, info, success, warning, danger, accent | neutral |
| title | ReactNode | required |
| description | ReactNode |  |
| action | { label, onClick, loading, disabled } |  |
| dismissible | boolean | false |
| onDismiss | () => void |  |
| timer | boolean or ms | false |
| animated | boolean | true |

## When to use

- Card for messages about the whole page or a recent action.
- Inline next to the content it explains.
- Banner for account or system wide notices, one at a time.

## When not to use

- For the result of an action that needs no follow up: use Toast.
- For a decision that blocks work: use Alert Dialog.

## Accessibility

- Danger and Warning use role alert, the rest role status.
- Each tone has its own glyph, so colour is never alone.
- Timers pause on hover and focus, and never apply to Danger or Warning.

## Motion

- Cards drop 8 px into place over 220 ms and the badge pops 60 ms later.
- Banners slide down from the top edge in 260 ms.
- Exit fades in 120 ms.
- The timer bar counts down linearly, and it is the only thing that keeps moving with reduced motion.
- On touch, a card follows the finger and flies out past 30%.