# Alert

> Inline alerts and page banners in four tones, with actions and dismiss.

Component · Free · https://lodeui.com/components/alert

## When to use

- Messages about a page or section: trial ending, failed payment, maintenance.
- Full-width banners at the top of an app.

## When not to use

- Short-lived confirmations: use a toast.
- Field errors: use Field's error.

## Installation

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

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { Alert } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";

export function PaymentFailed() {
  return (
    <Alert tone="danger" title="Your last payment failed" action={<Button size="sm">Update card</Button>} dismissible>
      We'll retry in 3 days. Update your card to avoid interruption.
    </Alert>
  );
}
```

## API reference

### Alert

An icon, title, body and optional action, inline or as a banner.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| tone | `"info" \| "success" \| "warning" \| "danger" \| "neutral"` | `"info"` | Color and icon. |
| title | `ReactNode` | – | One-line summary. |
| children | `ReactNode` | – | Details. |
| action | `ReactNode` | – | A button or link. |
| dismissible / onDismiss | `boolean / () => void` | – | Close button; the alert animates out. |
| variant | `"inline" \| "banner"` | `"inline"` | Card or full-width strip. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach the action and close button |

## Accessibility

- The icon is decorative; the title states the message.
- The close button is labelled.

## Motion

- Dismissing collapses the height and fades out.

## Responsive behavior

- The action moves under the text on narrow screens.

## Performance

- Static until dismissed.

## Notes for AI

- Use tone="danger" only when something is broken or blocked.

## Related

- [Toast](https://lodeui.com/components/toast) — Stacked notifications that fan out on hover, swipe to dismiss, and track promises.
- [Badge](https://lodeui.com/components/badge) — Tone badges and status dots for states like paid, pending, live and degraded.
- [Empty state](https://lodeui.com/components/empty-state) — Empty, no-results, error, offline, maintenance and rate-limit states with one API.