---
type: doc
title: Alert
description: Displays a callout for user attention.
---

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

```astro title="src/components/examples/alert/alert-demo.astro"
---
import CheckCircle2Icon from "@lucide/astro/icons/circle-check"
import InfoIcon from "@lucide/astro/icons/info"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
---

<div class="grid w-full max-w-md items-start gap-4">
  <Alert>
    <CheckCircle2Icon />
    <AlertTitle>Payment successful</AlertTitle>
    <AlertDescription>
      Your payment of $29.99 has been processed. A receipt has been sent to your
      email address.
    </AlertDescription>
  </Alert>
  <Alert>
    <InfoIcon />
    <AlertTitle>New feature available</AlertTitle>
    <AlertDescription>
      We've added dark mode support. You can enable it in your account settings.
    </AlertDescription>
  </Alert>
</div>
```

## Installation

```bash
npx shadcn@latest add @fulldev/alert
```

## Usage

```ts
import {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"
```

```astro
<Alert>
  <InfoIcon />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
  <AlertAction>
    <Button variant="outline">Enable</Button>
  </AlertAction>
</Alert>
```

`Alert` renders a `div` with `role="alert"`. Use it for inline feedback in the
page flow; for confirmations, use [Alert Dialog](/astro/components/alert-dialog/).

## Composition

```text
Alert
├── Icon
├── AlertTitle
├── AlertDescription
└── AlertAction
```

## Basic

A basic alert with an icon, title and description.

```astro title="src/components/examples/alert/alert-basic.astro"
---
import CheckCircle2Icon from "@lucide/astro/icons/circle-check"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
---

<Alert class="max-w-md">
  <CheckCircle2Icon />
  <AlertTitle>Account updated successfully</AlertTitle>
  <AlertDescription>
    Your profile information has been saved. Changes will be reflected
    immediately.
  </AlertDescription>
</Alert>
```

## Destructive

Use `variant="destructive"` to create a destructive alert.

```astro title="src/components/examples/alert/alert-destructive.astro"
---
import AlertCircleIcon from "@lucide/astro/icons/circle-alert"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
---

<Alert variant="destructive" class="max-w-md">
  <AlertCircleIcon />
  <AlertTitle>Payment failed</AlertTitle>
  <AlertDescription>
    Your payment could not be processed. Please check your payment method and
    try again.
  </AlertDescription>
</Alert>
```

## Action

Use `AlertAction` to add a button or other action element to the alert.

```astro title="src/components/examples/alert/alert-action.astro"
---
import {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"
import { Button } from "@/components/ui/button"
---

<Alert class="max-w-md">
  <AlertTitle>Dark mode is now available</AlertTitle>
  <AlertDescription>
    Enable it under your profile settings to get started.
  </AlertDescription>
  <AlertAction>
    <Button size="xs" variant="default">
      Enable
    </Button>
  </AlertAction>
</Alert>
```

## Custom Colors

Add classes such as `bg-amber-50 dark:bg-amber-950` to `Alert` to change its
colors.

```astro title="src/components/examples/alert/alert-colors.astro"
---
import AlertTriangleIcon from "@lucide/astro/icons/triangle-alert"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
---

<Alert class="max-w-md border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-50">
  <AlertTriangleIcon />
  <AlertTitle>Your subscription will expire in 3 days.</AlertTitle>
  <AlertDescription>
    Renew now to avoid service interruption or upgrade to a paid plan to
    continue using the service.
  </AlertDescription>
</Alert>
```

## RTL

Set `dir="rtl"` on `Alert` or an ancestor.

```astro title="src/components/examples/alert/alert-rtl.astro"
---
import CheckCircle2Icon from "@lucide/astro/icons/circle-check"
import InfoIcon from "@lucide/astro/icons/info"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

const translations = {
  en: {
    dir: "ltr",
    values: {
      paymentTitle: "Payment successful",
      paymentDescription:
        "Your payment of $29.99 has been processed. A receipt has been sent to your email address.",
      featureTitle: "New feature available",
      featureDescription:
        "We've added dark mode support. You can enable it in your account settings.",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      paymentTitle: "تم الدفع بنجاح",
      paymentDescription:
        "تمت معالجة دفعتك البالغة 29.99 دولارًا. تم إرسال إيصال إلى عنوان بريدك الإلكتروني.",
      featureTitle: "ميزة جديدة متاحة",
      featureDescription:
        "لقد أضفنا دعم الوضع الداكن. يمكنك تفعيله في إعدادات حسابك.",
    },
  },
  he: {
    dir: "rtl",
    values: {
      paymentTitle: "התשלום בוצע בהצלחה",
      paymentDescription:
        "התשלום שלך בסך 29.99 דולר עובד. קבלה נשלחה לכתובת האימייל שלך.",
      featureTitle: "תכונה חדשה זמינה",
      featureDescription:
        "הוספנו תמיכה במצב כהה. אתה יכול להפעיל אותו בהגדרות החשבון שלך.",
    },
  },
} as const

const alerts = [
  {
    icon: CheckCircle2Icon,
    titleKey: "paymentTitle",
    descriptionKey: "paymentDescription",
  },
  {
    icon: InfoIcon,
    titleKey: "featureTitle",
    descriptionKey: "featureDescription",
  },
] as const

const { dir, values: t } = translations.ar
---

<div class="grid w-full max-w-md items-start gap-4" dir={dir}>
  {alerts.map((alert) => {
    const Icon = alert.icon
    return (
      <Alert>
        <Icon />
        <AlertTitle>{t[alert.titleKey]}</AlertTitle>
        <AlertDescription>{t[alert.descriptionKey]}</AlertDescription>
      </Alert>
    )
  })}
</div>
```

## API Reference

Source: [`src/components/ui/alert`](https://github.com/fulldotdev/ui/tree/main/src/components/ui/alert)

### Alert

| Prop      | Type                         | Default     |
| --------- | ---------------------------- | ----------- |
| `variant` | `"default" \| "destructive"` | `"default"` |

`AlertTitle`, `AlertDescription` and `AlertAction` render a `div` and forward
`class` and other attributes. `AlertAction` is positioned in the top-right
corner of the alert.

## Install what this page shows

```bash
npx shadcn@latest add @fulldev/alert-examples
```