# Alert

A callout for important information, with optional status colors.

Source: [alert.tsx](https://github.com/jakejarvis/jarvis-ui/blob/main/src/components/ui/alert.tsx)

```tsx
import {
  CircleCheckIcon,
  InfoIcon,
  MegaphoneIcon,
  OctagonXIcon,
  TriangleAlertIcon,
} from "lucide-react";

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

export default function AlertVariants() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-3">
      <Alert>
        <MegaphoneIcon />
        <AlertTitle>Scheduled maintenance</AlertTitle>
        <AlertDescription>
          Projects will be read-only on Saturday from 02:00 to 03:00 UTC.
        </AlertDescription>
      </Alert>
      <Alert variant="info">
        <InfoIcon />
        <AlertTitle>Shared views are here</AlertTitle>
        <AlertDescription>
          Save a filter and share it with your team. <a href="#shared-views">Learn more</a>
        </AlertDescription>
      </Alert>
      <Alert variant="success">
        <CircleCheckIcon />
        <AlertTitle>Payment received</AlertTitle>
        <AlertDescription>Invoice INV-1042 was paid in full.</AlertDescription>
      </Alert>
      <Alert variant="warning">
        <TriangleAlertIcon />
        <AlertTitle>Storage almost full</AlertTitle>
        <AlertDescription>
          You’ve used 9.2 of 10 GB. Remove old files or add more storage.
        </AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <OctagonXIcon />
        <AlertTitle>Deployment failed</AlertTitle>
        <AlertDescription>The build for mobile-app exited with code 1.</AlertDescription>
      </Alert>
    </div>
  );
}
```

## Installation

Add the registry, once per project:

```bash
npx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
```

Then add the component:

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

## Usage

```tsx
import { InfoIcon } from "lucide-react";

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

export function MaintenanceAlert() {
  return (
    <Alert variant="info">
      <InfoIcon />
      <AlertTitle>Scheduled maintenance</AlertTitle>
      <AlertDescription>
        Projects will be read-only on Saturday from 02:00 to 03:00 UTC.
      </AlertDescription>
    </Alert>
  );
}
```

Put an icon first to show it beside the text.

Alerts don't announce themselves. For a message that appears after something the user did, add
`role="alert"` or `role="status"`, or use a [toast](https://ui.jarv.is/components/toast.md).

## Composition

- `Alert`
  - `AlertTitle`
  - `AlertDescription`
  - `AlertAction`

## Examples

### With actions

`AlertAction` puts buttons in the top right corner. Give an icon-only dismiss button an
`aria-label`.

```tsx
import { CircleCheckIcon, MegaphoneIcon, OctagonXIcon, RotateCcwIcon, XIcon } from "lucide-react";

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

export default function AlertWithActions() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-3">
      <Alert>
        <MegaphoneIcon />
        <AlertTitle>Scheduled maintenance</AlertTitle>
        <AlertDescription>
          Projects will be read-only on Saturday from 02:00 to 03:00 UTC.
        </AlertDescription>
        <AlertAction>
          <Button variant="ghost" size="icon-sm" aria-label="Dismiss">
            <XIcon />
          </Button>
        </AlertAction>
      </Alert>
      <Alert variant="success">
        <CircleCheckIcon />
        <AlertTitle>Payment received</AlertTitle>
        <AlertDescription>Invoice INV-1042 was paid in full.</AlertDescription>
        <AlertAction>
          <Button variant="secondary" size="xs">
            View
          </Button>
        </AlertAction>
      </Alert>
      <Alert variant="destructive">
        <OctagonXIcon />
        <AlertTitle>Deployment failed</AlertTitle>
        <AlertDescription>The build for mobile-app exited with code 1.</AlertDescription>
        <AlertAction>
          <Button variant="secondary" size="xs">
            <RotateCcwIcon />
            Retry
          </Button>
        </AlertAction>
      </Alert>
    </div>
  );
}
```

### Title only

```tsx
import { CircleCheckIcon } from "lucide-react";

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

export default function AlertTitleOnly() {
  return (
    <Alert className="max-w-xl">
      <CircleCheckIcon />
      <AlertTitle>Your changes were saved.</AlertTitle>
    </Alert>
  );
}
```

### Without an icon

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

export default function AlertWithoutIcon() {
  return (
    <Alert className="max-w-xl">
      <AlertTitle>Two-factor authentication is off</AlertTitle>
      <AlertDescription>
        Turn it on in your security settings to protect your account.
      </AlertDescription>
    </Alert>
  );
}
```

## Props

| Part | Extends |
| --- | --- |
| `Alert` | `<div>` |
| `AlertTitle` | `<div>` |
| `AlertDescription` | `<div>` |
| `AlertAction` | `<div>` |

### Alert

| Prop       | Type                                                             | Description          |
| ---------- | ---------------------------------------------------------------- | -------------------- |
| `variant?` | `"default" \| "destructive" \| "info" \| "success" \| "warning"` | Default: `"default"` |