# Alert

import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert";
import { CheckCircle2Icon, TerminalIcon } from "zudoku/icons";
import { ReactComponentDoc } from "zudoku/ui/ReactComponentDoc";

An alert component for displaying important information to users with different severity levels.

## Import

```tsx
import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert";
```

## Components

The Alert component consists of several sub-components:

- `Alert` - The main container
- `AlertTitle` - Title for the alert
- `AlertDescription` - Description content for the alert

## Default Alert

<Alert className="not-prose">
  <TerminalIcon className="h-4 w-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

```tsx title="Alert"
<Alert>
  <TerminalIcon className="h-4 w-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>
```

## Destructive Alert

<Alert variant="destructive">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
</Alert>

```tsx
<Alert variant="destructive">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
</Alert>
```

## Without Title

<Alert>
  <TerminalIcon className="h-4 w-4" />
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

```tsx
<Alert>
  <TerminalIcon className="h-4 w-4" />
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>
```

## Without Icon

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

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

## Usage Examples

### Success Alert

<Alert className="border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-400">
  <CheckCircle2Icon className="h-4 w-4" />
  <AlertTitle>Success!</AlertTitle>
  <AlertDescription>Your changes have been saved successfully.</AlertDescription>
</Alert>

```tsx
<Alert className="border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-400">
  <CheckCircle2Icon className="h-4 w-4" />
  <AlertTitle>Success!</AlertTitle>
  <AlertDescription>Your changes have been saved successfully.</AlertDescription>
</Alert>
```

### Warning Alert

<Alert className="border-yellow-200 bg-yellow-50 text-yellow-800 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-400">
  <AlertTitle>Warning!</AlertTitle>
  <AlertDescription>This action cannot be undone. Please proceed with caution.</AlertDescription>
</Alert>

```tsx
<Alert className="border-yellow-200 bg-yellow-50 text-yellow-800 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-400">
  <AlertTitle>Warning!</AlertTitle>
  <AlertDescription>This action cannot be undone. Please proceed with caution.</AlertDescription>
</Alert>
```

# Props

<ReactComponentDoc component={Alert} />