# Alert

> Un aviso fijo dentro de la página: informativo, éxito, atención o error.

```tsx
import { Alert, AlertDescription, AlertTitle } from "sebs7n-ui/alert"
```

Sin `"use client"`: sirve en un Server Component.

## Ejemplos

### Las cuatro variantes

```tsx
import { Alert, AlertDescription, AlertTitle } from "sebs7n-ui/alert"
import { CheckCircle2Icon, InfoIcon, TriangleAlertIcon, XCircleIcon } from "lucide-react"

function Variantes() {
  return (
    <div className="flex w-full flex-col gap-3">
      <Alert>
        <InfoIcon />
        <AlertTitle>Modo de prueba</AlertTitle>
        <AlertDescription>Las facturas que emitas acá no llegan a AFIP.</AlertDescription>
      </Alert>
      <Alert variant="success">
        <CheckCircle2Icon />
        <AlertTitle>Comprobante aprobado</AlertTitle>
        <AlertDescription>CAE 75012345678901, válido hasta el 10/10.</AlertDescription>
      </Alert>
      <Alert variant="warning">
        <TriangleAlertIcon />
        <AlertTitle>El certificado vence en 12 días</AlertTitle>
        <AlertDescription>Después de esa fecha no vas a poder emitir.</AlertDescription>
      </Alert>
      <Alert variant="error">
        <XCircleIcon />
        <AlertTitle>AFIP rechazó el comprobante</AlertTitle>
        <AlertDescription>El CUIT del receptor no está registrado.</AlertDescription>
      </Alert>
    </div>
  )
}
```

## Props

### Alert

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `variant` | `"neutral" \| "brand" \| "success" \| "warning" \| "error"` | — | — |
| `className` | `string` | — | — |

### AlertDescription

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### AlertTitle

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

## Teclado

| Tecla | Qué hace |
|---|---|
| — | No es interactivo, salvo que le pongas un link o un botón adentro. |

## Accesibilidad

- Un aviso que aparece por algo que hizo el usuario necesita `role="status"` (o `alert` si es urgente): si no, nadie se entera.
- El fondo es neutro a propósito: la variante solo cambia la franja izquierda y el ícono, que llega a 3:1.
- El ícono es decorativo — el texto tiene que decir de qué se trata sin él.

## Reglas de uso

- **Fijo en la página, para algo que sigue siendo verdad.** Lo que pasa y se va es un toast.
- Un error de un campo va al lado del campo, no en un Alert arriba del formulario.
- Si hay una acción, que sea una sola y esté adentro.

## Relacionados

[sonner](/docs/components/sonner.md) · [empty-state](/docs/components/empty-state.md) · [badge](/docs/components/badge.md)