# Alert

Inline status card that can resolve in place: its icon draws a check and the card can fold down to a shorter message. Also includes a modal alert that rises over a dimmed screen.

> Composed · Free · Feedback — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add alert
```

## Import

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

## Variants

- `inline` — Inline: `npx @lumioui/cli add alert-inline`
- `modal` — Modal: `npx @lumioui/cli add alert-modal`

## Props

### Alert

| Prop | Type | Notes |
| --- | --- | --- |
| `variant?` | `AlertVariant` | — |
| `animateLayout?` | `boolean` | Grow or fold in place on spring.layout when the content changes  (e.g. a resolved alert collapsing to one line). Default false. |
| `className?` | `string` | — |

### AlertGlyph

| Prop | Type | Notes |
| --- | --- | --- |
| `variant?` | `AlertVariant` | Override the status; defaults to the enclosing Alert's variant. |
| `size?` | `number` | Glyph size in pt. Default 22. |
| `className?` | `string` | — |

### ModalAlert

| Prop | Type | Notes |
| --- | --- | --- |
| `open` | `boolean` | — |
| `onOpenChange` | `(open: boolean) => void` | — |
| `title` | `string` | — |
| `message?` | `string` | — |
| `buttons?` | `ModalAlertButton[]` | — |
| `haptic?` | `"warning" | "error" | "success" | false` | Haptic style when alert appears. Default "warning". |
| `glass?` | `boolean` | Frosted glass panel instead of the solid card. Use only when  the screen behind is photographic / moving content. Default false. |

Source: https://lumioui.com/components/alert