---
title: Alert
description: Inline callouts for updates, warnings, and errors.
group: Components
order: 11
---

Share status and feedback without interrupting the page. Start with a title and description, then add an icon or action when useful.

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

export function Example() {
  return (
    <Alert>
      <AlertTitle>Registry sync finished</AlertTitle>
      <AlertDescription>
        New items are listed locally. Refresh the docs if a page still looks
        stale.
      </AlertDescription>
    </Alert>
  )
}
```

## Installation

```bash
npx @arctis-sh/@arctis-sh/ui@latest add alert
```

## Usage

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

```tsx
<Alert>
  <AlertTitle>Registry sync finished</AlertTitle>
  <AlertDescription>
    New items are available locally. Refresh the docs if a page still looks out of date.
  </AlertDescription>
</Alert>
```

## Composition

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

The title and description carry the message. Add an SVG as a direct child for a leading icon, and use `AlertAction` for an optional control in the top-right.

## Basic

A simple title and description, without an icon.

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

export function Example() {
  return (
    <Alert>
      <AlertTitle>Registry sync finished</AlertTitle>
      <AlertDescription>
        New items are listed locally. Refresh the docs if a page still looks
        stale.
      </AlertDescription>
    </Alert>
  )
}
```

## With icon

Pass an SVG as a direct child of `Alert` to show a leading icon.

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

export function Example() {
  return (
    <Alert>
      <CheckIcon />
      <AlertTitle>Component installed</AlertTitle>
      <AlertDescription>
        Source landed in your repo. Open the file and tweak it like any other
        local module.
      </AlertDescription>
    </Alert>
  )
}
```

## Success

Use `variant="success"` to confirm a completed action.

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

export function Example() {
  return (
    <Alert variant="success">
      <CheckIcon />
      <AlertTitle>Theme tokens applied</AlertTitle>
      <AlertDescription>
        Light and dark variables are wired. Preview the docs site to confirm
        contrast.
      </AlertDescription>
    </Alert>
  )
}
```

## Warning

Use `variant="warning"` for cautionary or time-sensitive information.

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

export function Example() {
  return (
    <Alert variant="warning">
      <WarningIcon />
      <AlertTitle>CLI cache is outdated</AlertTitle>
      <AlertDescription>
        Run a fresh install before adding components so you do not pull a
        stale registry snapshot.
      </AlertDescription>
    </Alert>
  )
}
```

## Destructive

Use `variant="destructive"` for failures and errors that need attention.

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

export function Example() {
  return (
    <Alert variant="destructive">
      <AlertCircleIcon />
      <AlertTitle>Could not resolve registry</AlertTitle>
      <AlertDescription>
        The namespace URL did not return an index. Check the registries map in
        your config and try again.
      </AlertDescription>
    </Alert>
  )
}
```

## Action

Wrap a button or other control in `AlertAction`. Add right padding to `Alert` so the message has room beside it.

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

export function Example() {
  return (
    <Alert className="pr-28">
      <InfoIcon />
      <AlertTitle>New accordion patterns</AlertTitle>
      <AlertDescription>
        Nested and card-grid examples shipped. Pull the latest docs when you
        have a minute.
      </AlertDescription>
      <AlertAction>
        <Button type="button" size="sm">
          View
        </Button>
      </AlertAction>
    </Alert>
  )
}
```

## API Reference

### Alert

| Prop | Type | Default |
| --- | --- | --- |
| variant | "default" \| "success" \| "warning" \| "destructive" | "default" |
| className | string | — |
| role | "alert" | "alert" |

```tsx
<Alert>
  <AlertTitle>Sync complete</AlertTitle>
  <AlertDescription>Your local registry is up to date.</AlertDescription>
</Alert>
```

### AlertTitle

| Prop | Type | Default |
| --- | --- | --- |
| className | string | — |

```tsx
<AlertTitle>Sync complete</AlertTitle>
```

### AlertDescription

| Prop | Type | Default |
| --- | --- | --- |
| className | string | — |

```tsx
<AlertDescription>Your local registry is up to date.</AlertDescription>
```

### AlertAction

| Prop | Type | Default |
| --- | --- | --- |
| className | string | — |

```tsx
<AlertAction>
  <Button size="sm" variant="outline">Undo</Button>
</AlertAction>
```

## Source

```tsx
import type { HTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";

type AlertVariant = "default" | "success" | "warning" | "destructive";

type AlertProps = HTMLAttributes<HTMLDivElement> & {
  variant?: AlertVariant;
  children: ReactNode;
};

const variantClass: Record<AlertVariant, string> = {
  default: "border-border bg-card text-card-foreground",
  success:
    "border-success/25 bg-success/5 text-success",
  warning:
    "border-warning/25 bg-warning/5 text-warning",
  destructive:
    "border-destructive/25 bg-destructive/5 text-destructive",
};

export function Alert({
  variant = "default",
  className,
  children,
  ...props
}: AlertProps) {
  return (
    <div
      role="alert"
      data-variant={variant}
      className={cn(
        "relative grid w-full grid-cols-[0_1fr] items-start gap-y-1 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-3 [&>svg]:col-start-1 [&>svg]:row-span-2 [&>svg]:row-start-1 [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:translate-y-px [&>svg]:text-current",
        variantClass[variant],
        className,
      )}
      {...props}
    >
      {children}
    </div>
  );
}

type AlertTitleProps = HTMLAttributes<HTMLDivElement> & {
  children: ReactNode;
};

export function AlertTitle({ className, children, ...props }: AlertTitleProps) {
  return (
    <div
      className={cn(
        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
        className,
      )}
      {...props}
    >
      {children}
    </div>
  );
}

type AlertDescriptionProps = HTMLAttributes<HTMLDivElement> & {
  children: ReactNode;
};

export function AlertDescription({
  className,
  children,
  ...props
}: AlertDescriptionProps) {
  return (
    <div
      className={cn(
        "col-start-2 grid justify-items-start gap-1 text-sm text-current/70 [&_p]:leading-relaxed",
        className,
      )}
      {...props}
    >
      {children}
    </div>
  );
}

type AlertActionProps = HTMLAttributes<HTMLDivElement> & {
  children: ReactNode;
};

export function AlertAction({ className, children, ...props }: AlertActionProps) {
  return (
    <div
      className={cn(
        "absolute top-2.5 right-3 flex items-center gap-1",
        className,
      )}
      {...props}
    >
      {children}
    </div>
  );
}
```