# Alert

Calls out something the reader should know, inline with the page.

> Every page: https://constella.aayush.cv/llms.txt

```tsx
<Alert>
  <HugeiconsIcon icon={CheckmarkCircle02Icon} />
  <AlertTitle>Payment successful</AlertTitle>
  <AlertDescription>
    Your payment of $29.99 has been processed. A receipt has been sent to your
    email address.
  </AlertDescription>
</Alert>
```

## Installation

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

## Usage

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

```tsx
<Alert>
  <HugeiconsIcon icon={InformationCircleIcon} />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the CLI.
  </AlertDescription>
</Alert>
```

## Composition

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

## Color

Use the `color` prop to color the icon. The title and description stay neutral.

| Color     | Icon color |
| --------- | ---------- |
| `success` | Green      |
| `info`    | Blue       |
| `warning` | Amber      |
| `danger`  | Red        |

```tsx
<Alert color="danger">
  <HugeiconsIcon icon={AlertCircleIcon} />
  <AlertTitle>Payment failed</AlertTitle>
</Alert>
```

## Alert Title

An alert can be a title alone, a description alone, or skip the icon; the text takes the room that's left.

```tsx
<Alert color="success">
  <HugeiconsIcon icon={CheckmarkCircle02Icon} />
  <AlertTitle>Your changes are live.</AlertTitle>
</Alert>
```

## Alert Action

Use `AlertAction` for a button at the alert's end.

```tsx
<Alert>
  <AlertTitle>Dark mode is now available</AlertTitle>
  <AlertAction>
    <Button size="sm" variant="outline">
      Enable
    </Button>
  </AlertAction>
</Alert>
```

## API Reference

| Part | Adds |
| --- | --- |
| `Alert` | `color`: `"success"`, `"info"`, `"warning"` or `"danger"`; `role="alert"` |
| `AlertTitle` | `render`, to make it a heading: `render={<h3 />}` |

Every part takes `sx`, applied last, and renders a `div`. For `render`, see [Base UI useRender](https://base-ui.com/react/utils/use-render).