Alert

Mensaje destacado para comunicar información importante al usuario.

---

Import

import { Alert, AlertTitle, AlertDescription } from '@imansi/ui';

---

Uso básico

<Alert>
  <AlertTitle>Atención</AlertTitle>
  <AlertDescription>
    Tu sesión expira en 5 minutos.
  </AlertDescription>
</Alert>

---

Variantes

<Alert variant="info">
  <AlertTitle>Información</AlertTitle>
  <AlertDescription>Hay una nueva versión disponible.</AlertDescription>
</Alert>

<Alert variant="success">
  <AlertTitle>Éxito</AlertTitle>
  <AlertDescription>Los cambios se guardaron correctamente.</AlertDescription>
</Alert>

<Alert variant="warning">
  <AlertTitle>Advertencia</AlertTitle>
  <AlertDescription>Esta acción es irreversible.</AlertDescription>
</Alert>

<Alert variant="destructive">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>No pudimos procesar tu solicitud.</AlertDescription>
</Alert>

Variante	Uso
info	Información neutral (por defecto)
success	Confirmación de éxito
warning	Advertencia
destructive	Error o peligro

---

Con íconos

import { Info, CheckCircle, AlertTriangle, XCircle } from 'lucide-react';

<Alert variant="info">
  <Info className="h-4 w-4" />
  <AlertTitle>Info</AlertTitle>
  <AlertDescription>Hay una nueva versión disponible.</AlertDescription>
</Alert>

<Alert variant="success">
  <CheckCircle className="h-4 w-4" />
  <AlertTitle>Guardado</AlertTitle>
  <AlertDescription>Tu perfil se actualizó correctamente.</AlertDescription>
</Alert>

---

Solo título

<Alert variant="warning">
  <AlertTitle>Tu cuenta será suspendida en 3 días.</AlertTitle>
</Alert>

---

Solo descripción

<Alert variant="info">
  <AlertDescription>
    Todos los cambios se guardan automáticamente.
  </AlertDescription>
</Alert>

---

Con acción

<Alert variant="warning">
  <AlertTitle>Sesión por expirar</AlertTitle>
  <AlertDescription>
    Tu sesión expira en 5 minutos.
  </AlertDescription>
  <div className="mt-3">
    <Button size="sm" variant="outline">
      Extender sesión
    </Button>
  </div>
</Alert>

---

Props

Alert

Prop	Tipo	Default	Descripción
variant	'info' | 'success' | 'warning' | 'destructive'	'info'	Estilo visual
className	string	—	Clases adicionales
...props	HTMLAttributes<HTMLDivElement>	—	Todas las props nativas

AlertTitle y AlertDescription

Aceptan las mismas props nativas de un <div>, más className.

---

Accesibilidad

Alert usa role="alert" cuando la variante es destructive, lo que hace que los lectores de pantalla lo anuncien automáticamente.

Para alerts informativos, se recomienda usar role="status" y aria-live="polite":

<Alert variant="success" role="status" aria-live="polite">
  <AlertTitle>Guardado</AlertTitle>
  <AlertDescription>Los cambios se guardaron.</AlertDescription>
</Alert>

---

Ejemplo completo

import { useState } from 'react';
import { Alert, AlertTitle, AlertDescription, Button } from '@imansi/ui';
import { CheckCircle, XCircle } from 'lucide-react';

export function NotificacionFormulario() {
  const [estado, setEstado] = useState(null);

  return (
    <div className="space-y-4">
      {estado === 'success' && (
        <Alert variant="success">
          <CheckCircle className="h-4 w-4" />
          <AlertTitle>Formulario enviado</AlertTitle>
          <AlertDescription>
            Tu mensaje fue recibido. Te respondemos en 24 hs.
          </AlertDescription>
        </Alert>
      )}

      {estado === 'error' && (
        <Alert variant="destructive">
          <XCircle className="h-4 w-4" />
          <AlertTitle>Error al enviar</AlertTitle>
          <AlertDescription>
            Verificá tu conexión e intentá de nuevo.
          </AlertDescription>
        </Alert>
      )}

      <Button onClick={() => setEstado('success')}>Enviar</Button>
    </div>
  );
}