---
title: Alert
description: A callout for displaying important information.
---

```tsx
import { Alert, AlertContent, AlertDescription, AlertTitle } from "@/components/ui/alert";

export function AlertDemo() {
  return (
    <Alert className="max-w-xl">
      <AlertContent>
        <AlertTitle>Heads up!</AlertTitle>
        <AlertDescription>
          <p>Describe what can be done about it here.</p>
        </AlertDescription>
      </AlertContent>
    </Alert>
  );
}
```

## Installation

<ComponentSource name="alert" title="components/ui/alert.tsx" />

## Anatomy

```tsx
<Alert>
  <AlertIndicator />
  <AlertContent>
    <AlertTitle />
    <AlertDescription />
  </AlertContent>
  <AlertAction />
</Alert>
```

## Usage

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

```tsx
<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>
```

## Examples

### Variants

```tsx
import {
  IconAlertCircle,
  IconAlertTriangle,
  IconCircleCheck,
  IconInfoCircle,
} from "@tabler/icons-react";

import { Alert, AlertContent, AlertIndicator, AlertTitle } from "@/components/ui/alert";

const alerts = [
  {
    variant: "primary",
    icon: IconInfoCircle,
    title: "This is a primary alert",
  },
  {
    variant: "secondary",
    icon: IconInfoCircle,
    title: "This is a secondary alert",
  },
  {
    variant: "info",
    icon: IconInfoCircle,
    title: "This is an info alert",
  },
  {
    variant: "success",
    icon: IconCircleCheck,
    title: "This is a success alert",
  },
  {
    variant: "warning",
    icon: IconAlertTriangle,
    title: "This is a warning alert",
  },
  {
    variant: "error",
    icon: IconAlertCircle,
    title: "This is an error alert",
  },
] as const;

export function AlertDemo() {
  return (
    <div className="flex w-full flex-col items-center gap-4">
      {alerts.map(({ variant, icon: Icon, title }) => (
        <Alert key={variant} variant={variant} className="max-w-xl">
          <AlertIndicator>
            <Icon />
          </AlertIndicator>
          <AlertContent>
            <AlertTitle>{title}</AlertTitle>
          </AlertContent>
        </Alert>
      ))}
    </div>
  );
}
```

### With icon and action

```tsx
import { IconInfoCircle } from "@tabler/icons-react";

import {
  Alert,
  AlertAction,
  AlertContent,
  AlertDescription,
  AlertIndicator,
  AlertTitle,
} from "@/components/ui/alert";
import { Button } from "@/components/ui/button";

export function AlertDemo() {
  return (
    <Alert variant="info" className="max-w-xl">
      <AlertIndicator>
        <IconInfoCircle />
      </AlertIndicator>
      <AlertContent>
        <AlertTitle>Update available</AlertTitle>
        <AlertDescription>
          A new version of the application is available. Please update to the latest version to
          enjoy new features.
        </AlertDescription>
      </AlertContent>
      <AlertAction className="">
        <Button size="xs" variant="outline">
          Cancel
        </Button>
        <Button size="xs" variant="info">
          Update
        </Button>
      </AlertAction>
    </Alert>
  );
}
```

### Dismissible alert

```tsx
"use client";

import { useState } from "react";

import { IconInfoCircle, IconX } from "@tabler/icons-react";

import {
  Alert,
  AlertAction,
  AlertContent,
  AlertDescription,
  AlertIndicator,
  AlertTitle,
} from "@/components/ui/alert";
import { Button } from "@/components/ui/button";

export function AlertDemo() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <>
      {isVisible ? (
        <Alert variant="primary" className="max-w-xl">
          <AlertIndicator>
            <IconInfoCircle />
          </AlertIndicator>
          <AlertContent>
            <AlertTitle>Heads up!</AlertTitle>
            <AlertDescription>Describe what can be done about it here.</AlertDescription>
          </AlertContent>
          <AlertAction>
            <Button
              variant="outline"
              size="icon-xs"
              className="rounded-full"
              onClick={() => setIsVisible(false)}
            >
              <IconX className="size-3.5" />
            </Button>
          </AlertAction>
        </Alert>
      ) : (
        <Button onClick={() => setIsVisible(true)}>Show</Button>
      )}
    </>
  );
}
```

## API Reference

### Alert props

<ApiReferenceAccordion
  type={{
    variant: {
      description: "The variant of the alert.",
      type: "'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'",
      default: `'primary'`,
    },
  }}
/>