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.