Navigation: [/sitemap.md](/sitemap.md)

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

import { Icon } from "@/components/ui/icon"

```astro live props={{ name: 'alert' }}
---
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Icon } from "@/components/ui/icon"
---

<div class="grid w-full max-w-xl items-start gap-4">
  <Alert>
    <Icon name="circle-check" />
    <AlertTitle>Success! Your changes have been saved</AlertTitle>
    <AlertDescription>
      This is an alert with icon, title and description.
    </AlertDescription>
  </Alert>
  <Alert>
    <Icon name="popcorn" />
    <AlertTitle>New feature preview enabled</AlertTitle>
  </Alert>
  <Alert variant="destructive">
    <Icon name="circle-alert" />
    <AlertTitle>Unable to process your payment.</AlertTitle>
    <AlertDescription>
      <p>Please verify your billing information and try again.</p>
      <ul class="list-inside list-disc text-sm">
        <li>Check your card details</li>
        <li>Ensure sufficient funds</li>
        <li>Verify billing address</li>
      </ul>
    </AlertDescription>
  </Alert>
</div>
```

## Installation

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

## Usage

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

```astro
<Alert variant="default">
  <Terminal />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    Install components through the CLI and keep the source in your project.
  </AlertDescription>
</Alert>
```

## Example

Use `AlertAction` when the alert should include a secondary control such as a
button.

```astro live
---
import {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"
import { Button } from "@/components/ui/button"
---

<Alert>
  <AlertTitle>New version available</AlertTitle>
  <AlertDescription>
    Install the latest update to get bug fixes and performance improvements.
  </AlertDescription>
  <AlertAction>
    <Button size="sm" variant="outline">Enable</Button>
  </AlertAction>
</Alert>
```

## Composition

Use the following composition to build an `Alert`:

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

## Notes

- Use `Alert` for inline feedback inside the page flow.
- Use `variant="destructive"` for error or warning states that need stronger
  emphasis.
- For destructive confirmation flows, use
  [Alert Dialog](/components/alert-dialog/) instead.

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/alert) for more information on props.