laif-ds/dist/agent-docs/components/Alert.md

Design System di Laif con componenti React basati su principi di Atomic Design

# Alert

## Overview

A simple, accessible alert component with title and description. Supports variants for information and destructive/error states.

---

## Props

### Alert (Root)

| Prop        | Type              | Default        | Description                                     |
| ----------- | ----------------- | -------------- | ----------------------------------------------- | -------------------------- |
| `variant`   | `"default"        | "destructive"` | `"default"`                                     | Visual style of the alert. |
| `className` | `string`          | `""`           | Additional classes applied to the root element. |
| `children`  | `React.ReactNode` | **required**   | Content of the alert (title/description/icon).  |

### Subcomponents

- `AlertTitle`: Title area of the alert (bold line).
- `AlertDescription`: Secondary text, supports rich content and paragraphs.

---

## Behavior

- **Accessible**: Uses `role="alert"` and semantic slots for screen readers.
- **Variants**: `destructive` applies error coloring; `default` uses neutral styling.
- **Layout**: Supports optional leading icon; layout adapts when an icon is present.

---

## Examples

### Default

```tsx
import { Alert, AlertTitle, AlertDescription } from "laif-ds";

export function DefaultAlert() {
  return (
    <Alert>
      <AlertTitle>Default Alert</AlertTitle>
      <AlertDescription>This is a default alert message.</AlertDescription>
    </Alert>
  );
}
```

### With Icon

```tsx
import { Alert, AlertTitle, AlertDescription, Icon } from "laif-ds";

export function AlertWithIcon() {
  return (
    <Alert>
      <Icon name="Info" />
      <AlertTitle>Information</AlertTitle>
      <AlertDescription>This alert includes an icon.</AlertDescription>
    </Alert>
  );
}
```

### Destructive

```tsx
import { Alert, AlertTitle, AlertDescription } from "laif-ds";

export function DestructiveAlert() {
  return (
    <Alert variant="destructive">
      <AlertTitle>Error</AlertTitle>
      <AlertDescription>
        Something went wrong. Please try again.
      </AlertDescription>
    </Alert>
  );
}
```

---

## Notes

- **Styling**: Use `className` on the root to add layout constraints (e.g., width).
- **Content**: `AlertDescription` supports rich content and multi-line paragraphs.
- **Icons**: Use `Icon` from `laif-ds` to add an optional leading icon.