Alerta

Un componente de banner inline que comunica mensajes de estado, advertencias o información contextual al usuario dentro del flujo normal de la página.

Casos de Uso

Mostrar un mensaje de éxito después del envío de un formulario
Advertir a los usuarios sobre cambios sin guardar antes de navegar
Mostrar un resumen de errores en la parte superior de un formulario con fallos de validación
Informar a los usuarios sobre mantenimiento programado o tiempo de inactividad
Presentar un consejo o nota informativa dentro del contenido de documentación
Alertar a los usuarios sobre problemas a nivel de cuenta (facturación, verificación)
Mostrar un aviso de obsolescencia para una API o característica

Implementación Más Simple

interface AlertProps {
  children: React.ReactNode;
}
 
export function Alert({ children }: AlertProps) {
  return (
    <div role="alert" className="rounded-lg border border-blue-200 bg-blue-50 p-4 text-sm text-blue-800">
      {children}
    </div>
  );
}

Una alerta informativa estática con role="alert" para que los lectores de pantalla la anuncien inmediatamente cuando aparezca en el DOM. No se necesita "use client" ya que no hay interactividad.

Variaciones

Alerta de Información

interface AlertProps {
  title?: string;
  children: React.ReactNode;
}
 
export function AlertInfo({ title, children }: AlertProps) {
  return (
    <div role="alert" className="rounded-lg border border-blue-200 bg-blue-50 p-4">
      {title && <p className="mb-1 text-sm font-semibold text-blue-900">{title}</p>}
      <p className="text-sm text-blue-800">{children}</p>
    </div>
  );
}

La variante de información usa tonos azules para indicar contenido neutral e informativo. La prop opcional title agrega una línea de encabezado en negrita arriba de la descripción para mensajería de dos niveles.

Alerta de Éxito

interface AlertProps {
  title?: string;
  children: React.ReactNode;
}
 
export function AlertSuccess({ title, children }: AlertProps) {
  return (
    <div role="alert" className="rounded-lg border border-green-200 bg-green-50 p-4">
      {title && <p className="mb-1 text-sm font-semibold text-green-900">{title}</p>}
      <p className="text-sm text-green-800">{children}</p>
    </div>
  );
}

El verde señala un resultado positivo -- formulario guardado, pago procesado, cuenta verificada. Esta variante generalmente se muestra después de una acción exitosa y puede emparejarse con un botón de cierre descartable.

Alerta de Advertencia

interface AlertProps {
  title?: string;
  children: React.ReactNode;
}
 
export function AlertWarning({ title, children }: AlertProps) {
  return (
    <div role="alert" className="rounded-lg border border-yellow-200 bg-yellow-50 p-4">
      {title && <p className="mb-1 text-sm font-semibold text-yellow-900">{title}</p>}
      <p className="text-sm text-yellow-800">{children}</p>
    </div>
  );
}

El amarillo llama la atención sin implicar fracaso. Usa esto para condiciones que necesitan reconocimiento pero no son bloqueantes -- espacio en disco bajo, límites de velocidad que se aproximan, o características obsoletas aún en uso.

Alerta Destructiva / de Error

interface AlertProps {
  title?: string;
  children: React.ReactNode;
}
 
export function AlertError({ title, children }: AlertProps) {
  return (
    <div role="alert" className="rounded-lg border border-red-200 bg-red-50 p-4">
      {title && <p className="mb-1 text-sm font-semibold text-red-900">{title}</p>}
      <p className="text-sm text-red-800">{children}</p>
    </div>
  );
}

El rojo comunica problemas críticos que requieren atención inmediata -- errores de validación, solicitudes fallidas, o confirmaciones de acciones destructivas. Considera usar aria-live="assertive" para errores que aparecen dinámicamente.

Con Icono

type AlertVariant = "info" | "success" | "warning" | "error";
 
interface AlertProps {
  variant?: AlertVariant;
  title?: string;
  children: React.ReactNode;
}
 
const variantStyles: Record<AlertVariant, { container: string; icon: string }> = {
  info: {
    container: "border-blue-200 bg-blue-50 text-blue-800",
    icon: "text-blue-500",
  },
  success: {
    container: "border-green-200 bg-green-50 text-green-800",
    icon: "text-green-500",
  },
  warning: {
    container: "border-yellow-200 bg-yellow-50 text-yellow-800",
    icon: "text-yellow-500",
  },
  error: {
    container: "border-red-200 bg-red-50 text-red-800",
    icon: "text-red-500",
  },
};
 
const icons: Record<AlertVariant, React.ReactNode> = {
  info: (
    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  ),
  success: (
    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  ),
  warning: (
    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
    </svg>
  ),
  error: (
    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  ),
};
 
export function Alert({ variant = "info", title, children }: AlertProps) {
  const styles = variantStyles[variant];
 
  return (
    <div role="alert" className={`flex gap-3 rounded-lg border p-4 ${styles.container}`}>
      <span className={`shrink-0 ${styles.icon}`}>{icons[variant]}</span>
      <div>
        {title && <p className="mb-1 text-sm font-semibold">{title}</p>}
        <p className="text-sm">{children}</p>
      </div>
    </div>
  );
}

Los iconos refuerzan el significado de la alerta más allá del color solo, lo cual es esencial para la accesibilidad. El shrink-0 en el contenedor del icono evita que se comprima cuando el contenido de texto es largo. El diseño flex con gap-3 mantiene espaciado consistente entre el icono y el texto.

Descartable con Botón de Cierre

"use client";
 
import { useState } from "react";
 
type AlertVariant = "info" | "success" | "warning" | "error";
 
interface AlertProps {
  variant?: AlertVariant;
  title?: string;
  children: React.ReactNode;
  onDismiss?: () => void;
}
 
const variantStyles: Record<AlertVariant, string> = {
  info: "border-blue-200 bg-blue-50 text-blue-800",
  success: "border-green-200 bg-green-50 text-green-800",
  warning: "border-yellow-200 bg-yellow-50 text-yellow-800",
  error: "border-red-200 bg-red-50 text-red-800",
};
 
export function DismissibleAlert({ variant = "info", title, children, onDismiss }: AlertProps) {
  const [visible, setVisible] = useState(true);
 
  if (!visible) return null;
 
  function handleDismiss() {
    setVisible(false);
    onDismiss?.();
  }
 
  return (
    <div role="alert" className={`flex items-start gap-3 rounded-lg border p-4 ${variantStyles[variant]}`}>
      <div className="flex-1">
        {title && <p className="mb-1 text-sm font-semibold">{title}</p>}
        <p className="text-sm">{children}</p>
      </div>
      <button
        type="button"
        onClick={handleDismiss}
        aria-label="Dismiss alert"
        className="shrink-0 rounded-md p-1 opacity-60 hover:opacity-100"
      >
        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  );
}

Gestiona su propia visibilidad con estado interno mientras también expone un callback onDismiss para que el componente padre reaccione (p. ej., persistir el descarte). El botón de cierre usa aria-label ya que no tiene texto visible. Requiere "use client" para state.

Con Enlace de Acción

type AlertVariant = "info" | "success" | "warning" | "error";
 
interface AlertProps {
  variant?: AlertVariant;
  children: React.ReactNode;
  actionLabel: string;
  actionHref: string;
}
 
const variantStyles: Record<AlertVariant, { container: string; link: string }> = {
  info: { container: "border-blue-200 bg-blue-50 text-blue-800", link: "text-blue-700 hover:text-blue-900" },
  success: { container: "border-green-200 bg-green-50 text-green-800", link: "text-green-700 hover:text-green-900" },
  warning: { container: "border-yellow-200 bg-yellow-50 text-yellow-800", link: "text-yellow-700 hover:text-yellow-900" },
  error: { container: "border-red-200 bg-red-50 text-red-800", link: "text-red-700 hover:text-red-900" },
};
 
export function AlertWithAction({ variant = "info", children, actionLabel, actionHref }: AlertProps) {
  const styles = variantStyles[variant];
 
  return (
    <div role="alert" className={`flex items-center justify-between gap-4 rounded-lg border p-4 ${styles.container}`}>
      <p className="text-sm">{children}</p>
      <a
        href={actionHref}
        className={`shrink-0 text-sm font-semibold underline ${styles.link}`}
      >
        {actionLabel}
      </a>
    </div>
  );
}
 
// Uso
<AlertWithAction variant="warning" actionLabel="Actualizar plan" actionHref="/billing">
  Has utilizado el 90% de tu cuota mensual de API.
</AlertWithAction>

El enlace de acción se sitúa en el borde derecho de la alerta usando justify-between, dándole prominencia visual sin romper el flujo del mensaje. El shrink-0 en el enlace evita que se ajuste cuando el texto del mensaje es largo.

Implementación Compleja

"use client";
 
import { forwardRef, useState, useEffect, useCallback, type ReactNode } from "react";
 
type AlertVariant = "info" | "success" | "warning" | "error";
 
interface AlertAction {
  label: string;
  onClick: () => void;
}
 
interface AlertProps {
  variant?: AlertVariant;
  title?: string;
  children: ReactNode;
  icon?: ReactNode;
  dismissible?: boolean;
  onDismiss?: () => void;
  autoClose?: number;
  action?: AlertAction;
  className?: string;
}
 
const variantConfig: Record<
  AlertVariant,
  { container: string; icon: ReactNode; iconColor: string }
> = {
  info: {
    container: "border-blue-200 bg-blue-50 text-blue-800",
    iconColor: "text-blue-500",
    icon: (
      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    ),
  },
  success: {
    container: "border-green-200 bg-green-50 text-green-800",
    iconColor: "text-green-500",
    icon: (
      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    ),
  },
  warning: {
    container: "border-yellow-200 bg-yellow-50 text-yellow-800",
    iconColor: "text-yellow-500",
    icon: (
      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
      </svg>
    ),
  },
  error: {
    container: "border-red-200 bg-red-50 text-red-800",
    iconColor: "text-red-500",
    icon: (
      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    ),
  },
};
 
export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
  {
    variant = "info",
    title,
    children,
    icon,
    dismissible = false,
    onDismiss,
    autoClose,
    action,
    className,
  },
  ref
) {
  const [visible, setVisible] = useState(true);
  const [exiting, setExiting] = useState(false);
  const config = variantConfig[variant];
 
  const dismiss = useCallback(() => {
    setExiting(true);
    const timer = setTimeout(() => {
      setVisible(false);
      onDismiss?.();
    }, 200);
    return () => clearTimeout(timer);
  }, [onDismiss]);
 
  useEffect(() => {
    if (!autoClose) return;
    const timer = setTimeout(dismiss, autoClose);
    return () => clearTimeout(timer);
  }, [autoClose, dismiss]);
 
  if (!visible) return null;
 
  const displayIcon = icon ?? config.icon;
 
  return (
    <div
      ref={ref}
      role="alert"
      aria-live={variant === "error" ? "assertive" : "polite"}
      className={[
        "flex items-start gap-3 rounded-lg border p-4 transition-opacity duration-200",
        config.container,
        exiting ? "opacity-0" : "opacity-100",
        className ?? "",
      ].join(" ")}
    >
      <span className={`shrink-0 pt-px ${config.iconColor}`}>{displayIcon}</span>
 
      <div className="flex-1">
        {title && (
          <p className="mb-1 text-sm font-semibold leading-5">{title}</p>
        )}
        <div className="text-sm leading-5">{children}</div>
        {action && (
          <button
            type="button"
            onClick={action.onClick}
            className="mt-2 text-sm font-semibold underline underline-offset-2 hover:no-underline"
          >
            {action.label}
          </button>
        )}
      </div>
 
      {dismissible && (
        <button
          type="button"
          onClick={dismiss}
          aria-label="Dismiss alert"
          className="shrink-0 rounded-md p-1 opacity-60 transition-opacity hover:opacity-100"
        >
          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      )}
    </div>
  );
});
 
// Uso
function SettingsPage() {
  const [saved, setSaved] = useState(false);
 
  return (
    <div className="space-y-4">
      {saved && (
        <Alert
          variant="success"
          title="Configuración guardada"
          dismissible
          autoClose={5000}
          onDismiss={() => setSaved(false)}
        >
          Tus preferencias han sido actualizadas exitosamente.
        </Alert>
      )}
 
      <Alert
        variant="warning"
        title="Compatibilidad del navegador"
        action={{ label: "Saber más", onClick: () => console.log("clicked") }}
      >
        Algunas características podrían no funcionar en Internet Explorer 11.
      </Alert>
 
      <Alert variant="error" title="Conexión fallida" dismissible>
        No se puede alcanzar el servidor. Verifica tu red e intenta de nuevo.
      </Alert>
    </div>
  );
}

Aspectos clave:

Cierre automático con limpieza -- la prop autoClose acepta una duración en milisegundos y descarta automáticamente la alerta. El timeout se limpia al desmontar para evitar actualizaciones de estado en componentes removidos.
Animación de salida -- el descarte desencadena un desvanecimiento de opacidad de 200ms estableciendo el estado exiting antes de remover el elemento, dando una sensación pulida sin requerir una librería de animación.
aria-live adaptativo -- las alertas de error usan aria-live="assertive" para interrumpir el lector de pantalla inmediatamente, mientras que otras variantes usan "polite" para esperar una pausa natural en el habla.
Anulación de icono -- cada variante proporciona un icono predeterminado, pero la prop icon permite a los consumidores sustituir su propio SVG o componente de icono sin cambiar la estructura del diseño.
Integración de botón de acción -- la prop action opcional coloca un botón inline debajo del mensaje, manteniendo la alerta autocontenida. Esto evita la necesidad de que los consumidores compongan contenido personalizado para patrones comunes de llamada a la acción.
forwardRef -- permite que los componentes padres midan la altura de la alerta para animaciones suave de entrada/salida o para desplazarla a la vista después de la inserción dinámica.

Inconvenientes

role="alert" anuncia en cada re-renderizado -- si el texto de la alerta cambia debido a un re-renderizado del componente padre, el lector de pantalla re-anuncia todo el contenido. Evita colocar alertas dentro de componentes que se re-renderizar frecuentemente, o memoiza la alerta.
El color solo comunicando severidad -- rojo para error y verde para éxito no tiene sentido para usuarios daltónicos. Siempre empareja el color con un icono y texto descriptivo para comunicar el tipo de alerta.
El cierre automático en alertas de error frustra a los usuarios -- los mensajes de error que desaparecen antes de que el usuario tenga tiempo de leerlos y actuar sobre ellos causa confusión. Evita autoClose en variantes de error y advertencia.
El descarte remueve el elemento del DOM -- después del descarte, la alerta se ha ido y no puede ser restaurada sin que el componente padre la remonte. Si necesitas "deshacer descarte", mantén la alerta en el DOM pero visualmente oculta, o gestiona el estado en el componente padre.
Múltiples alertas apiladas sin espaciado -- renderizar varias alertas seguidas sin una utilidad flex/gap o margin crea un diseño visualmente abarrotado. Envuelve las alertas en un contenedor space-y-3.
La región aria-live no se detecta en el renderizado inicial -- los lectores de pantalla solo anuncian cambios a una región aria-live, no su contenido inicial. Si la alerta está presente en la primera pintura, el usuario no la escuchará a menos que navegue a ella manualmente.

Relacionado

Toast -- Los toasts son mensajes flotantes transitorios; las alertas son banners inline persistentes
Badge -- Los badges indican estado en elementos individuales; las alertas comunican mensajes a nivel de página
Modal -- Los modales bloquean la interacción para confirmaciones críticas; las alertas informan sin bloquear
Button -- Las alertas con acciones a menudo contienen botones para respuesta del usuario
Input -- Los errores de validación de formularios funcionan bien con alertas de error en la parte superior del formulario

Alerta

Un componente de banner inline que comunica mensajes de estado, advertencias o información contextual al usuario dentro del flujo normal de la página.

Casos de Uso

Mostrar un mensaje de éxito después del envío de un formulario
Advertir a los usuarios sobre cambios sin guardar antes de navegar
Mostrar un resumen de errores en la parte superior de un formulario con fallos de validación
Informar a los usuarios sobre mantenimiento programado o tiempo de inactividad
Presentar un consejo o nota informativa dentro del contenido de documentación
Alertar a los usuarios sobre problemas a nivel de cuenta (facturación, verificación)
Mostrar un aviso de obsolescencia para una API o característica

Implementación Más Simple

interface AlertProps {
  children: React.ReactNode;
}
 
export function Alert({ children }: AlertProps) {
  return (
    <div role="alert" className="rounded-lg border border-blue-200 bg-blue-50 p-4 text-sm text-blue-800">
      {children}
    </div>
  );
}

Una alerta informativa estática con role="alert" para que los lectores de pantalla la anuncien inmediatamente cuando aparezca en el DOM. No se necesita "use client" ya que no hay interactividad.

Variaciones

Alerta de Información

interface AlertProps {
  title?: string;
  children: React.ReactNode;
}
 
export function AlertInfo({ title, children }: AlertProps) {
  return (
    <div role="alert" className="rounded-lg border border-blue-200 bg-blue-50 p-4">
      {title && <p className="mb-1 text-sm font-semibold text-blue-900">{title}</p>}
      <p className="text-sm text-blue-800">{children}</p>
    </div>
  );
}

Alerta de Éxito

interface AlertProps {
  title?: string;
  children: React.ReactNode;
}
 
export function AlertSuccess({ title, children }: AlertProps) {
  return (
    <div role="alert" className="rounded-lg border border-green-200 bg-green-50 p-4">
      {title && <p className="mb-1 text-sm font-semibold text-green-900">{title}</p>}
      <p className="text-sm text-green-800">{children}</p>
    </div>
  );
}

Alerta de Advertencia

interface AlertProps {
  title?: string;
  children: React.ReactNode;
}
 
export function AlertWarning({ title, children }: AlertProps) {
  return (
    <div role="alert" className="rounded-lg border border-yellow-200 bg-yellow-50 p-4">
      {title && <p className="mb-1 text-sm font-semibold text-yellow-900">{title}</p>}
      <p className="text-sm text-yellow-800">{children}</p>
    </div>
  );
}

Alerta Destructiva / de Error

interface AlertProps {
  title?: string;
  children: React.ReactNode;
}
 
export function AlertError({ title, children }: AlertProps) {
  return (
    <div role="alert" className="rounded-lg border border-red-200 bg-red-50 p-4">
      {title && <p className="mb-1 text-sm font-semibold text-red-900">{title}</p>}
      <p className="text-sm text-red-800">{children}</p>
    </div>
  );
}

Con Icono

type AlertVariant = "info" | "success" | "warning" | "error";
 
interface AlertProps {
  variant?: AlertVariant;
  title?: string;
  children: React.ReactNode;
}
 
const variantStyles: Record<AlertVariant, { container: string; icon: string }> = {
  info: {
    container: "border-blue-200 bg-blue-50 text-blue-800",
    icon: "text-blue-500",
  },
  success: {
    container: "border-green-200 bg-green-50 text-green-800",
    icon: "text-green-500",
  },
  warning: {
    container: "border-yellow-200 bg-yellow-50 text-yellow-800",
    icon: "text-yellow-500",
  },
  error: {
    container: "border-red-200 bg-red-50 text-red-800",
    icon: "text-red-500",
  },
};
 
const icons: Record<AlertVariant, React.ReactNode> = {
  info: (
    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  ),
  success: (
    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  ),
  warning: (
    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
    </svg>
  ),
  error: (
    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  ),
};
 
export function Alert({ variant = "info", title, children }: AlertProps) {
  const styles = variantStyles[variant];
 
  return (
    <div role="alert" className={`flex gap-3 rounded-lg border p-4 ${styles.container}`}>
      <span className={`shrink-0 ${styles.icon}`}>{icons[variant]}</span>
      <div>
        {title && <p className="mb-1 text-sm font-semibold">{title}</p>}
        <p className="text-sm">{children}</p>
      </div>
    </div>
  );
}

Descartable con Botón de Cierre

"use client";
 
import { useState } from "react";
 
type AlertVariant = "info" | "success" | "warning" | "error";
 
interface AlertProps {
  variant?: AlertVariant;
  title?: string;
  children: React.ReactNode;
  onDismiss?: () => void;
}
 
const variantStyles: Record<AlertVariant, string> = {
  info: "border-blue-200 bg-blue-50 text-blue-800",
  success: "border-green-200 bg-green-50 text-green-800",
  warning: "border-yellow-200 bg-yellow-50 text-yellow-800",
  error: "border-red-200 bg-red-50 text-red-800",
};
 
export function DismissibleAlert({ variant = "info", title, children, onDismiss }: AlertProps) {
  const [visible, setVisible] = useState(true);
 
  if (!visible) return null;
 
  function handleDismiss() {
    setVisible(false);
    onDismiss?.();
  }
 
  return (
    <div role="alert" className={`flex items-start gap-3 rounded-lg border p-4 ${variantStyles[variant]}`}>
      <div className="flex-1">
        {title && <p className="mb-1 text-sm font-semibold">{title}</p>}
        <p className="text-sm">{children}</p>
      </div>
      <button
        type="button"
        onClick={handleDismiss}
        aria-label="Dismiss alert"
        className="shrink-0 rounded-md p-1 opacity-60 hover:opacity-100"
      >
        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  );
}

Con Enlace de Acción

type AlertVariant = "info" | "success" | "warning" | "error";
 
interface AlertProps {
  variant?: AlertVariant;
  children: React.ReactNode;
  actionLabel: string;
  actionHref: string;
}
 
const variantStyles: Record<AlertVariant, { container: string; link: string }> = {
  info: { container: "border-blue-200 bg-blue-50 text-blue-800", link: "text-blue-700 hover:text-blue-900" },
  success: { container: "border-green-200 bg-green-50 text-green-800", link: "text-green-700 hover:text-green-900" },
  warning: { container: "border-yellow-200 bg-yellow-50 text-yellow-800", link: "text-yellow-700 hover:text-yellow-900" },
  error: { container: "border-red-200 bg-red-50 text-red-800", link: "text-red-700 hover:text-red-900" },
};
 
export function AlertWithAction({ variant = "info", children, actionLabel, actionHref }: AlertProps) {
  const styles = variantStyles[variant];
 
  return (
    <div role="alert" className={`flex items-center justify-between gap-4 rounded-lg border p-4 ${styles.container}`}>
      <p className="text-sm">{children}</p>
      <a
        href={actionHref}
        className={`shrink-0 text-sm font-semibold underline ${styles.link}`}
      >
        {actionLabel}
      </a>
    </div>
  );
}
 
// Uso
<AlertWithAction variant="warning" actionLabel="Actualizar plan" actionHref="/billing">
  Has utilizado el 90% de tu cuota mensual de API.
</AlertWithAction>

Implementación Compleja

"use client";
 
import { forwardRef, useState, useEffect, useCallback, type ReactNode } from "react";
 
type AlertVariant = "info" | "success" | "warning" | "error";
 
interface AlertAction {
  label: string;
  onClick: () => void;
}
 
interface AlertProps {
  variant?: AlertVariant;
  title?: string;
  children: ReactNode;
  icon?: ReactNode;
  dismissible?: boolean;
  onDismiss?: () => void;
  autoClose?: number;
  action?: AlertAction;
  className?: string;
}
 
const variantConfig: Record<
  AlertVariant,
  { container: string; icon: ReactNode; iconColor: string }
> = {
  info: {
    container: "border-blue-200 bg-blue-50 text-blue-800",
    iconColor: "text-blue-500",
    icon: (
      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    ),
  },
  success: {
    container: "border-green-200 bg-green-50 text-green-800",
    iconColor: "text-green-500",
    icon: (
      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    ),
  },
  warning: {
    container: "border-yellow-200 bg-yellow-50 text-yellow-800",
    iconColor: "text-yellow-500",
    icon: (
      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
      </svg>
    ),
  },
  error: {
    container: "border-red-200 bg-red-50 text-red-800",
    iconColor: "text-red-500",
    icon: (
      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    ),
  },
};
 
export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
  {
    variant = "info",
    title,
    children,
    icon,
    dismissible = false,
    onDismiss,
    autoClose,
    action,
    className,
  },
  ref
) {
  const [visible, setVisible] = useState(true);
  const [exiting, setExiting] = useState(false);
  const config = variantConfig[variant];
 
  const dismiss = useCallback(() => {
    setExiting(true);
    const timer = setTimeout(() => {
      setVisible(false);
      onDismiss?.();
    }, 200);
    return () => clearTimeout(timer);
  }, [onDismiss]);
 
  useEffect(() => {
    if (!autoClose) return;
    const timer = setTimeout(dismiss, autoClose);
    return () => clearTimeout(timer);
  }, [autoClose, dismiss]);
 
  if (!visible) return null;
 
  const displayIcon = icon ?? config.icon;
 
  return (
    <div
      ref={ref}
      role="alert"
      aria-live={variant === "error" ? "assertive" : "polite"}
      className={[
        "flex items-start gap-3 rounded-lg border p-4 transition-opacity duration-200",
        config.container,
        exiting ? "opacity-0" : "opacity-100",
        className ?? "",
      ].join(" ")}
    >
      <span className={`shrink-0 pt-px ${config.iconColor}`}>{displayIcon}</span>
 
      <div className="flex-1">
        {title && (
          <p className="mb-1 text-sm font-semibold leading-5">{title}</p>
        )}
        <div className="text-sm leading-5">{children}</div>
        {action && (
          <button
            type="button"
            onClick={action.onClick}
            className="mt-2 text-sm font-semibold underline underline-offset-2 hover:no-underline"
          >
            {action.label}
          </button>
        )}
      </div>
 
      {dismissible && (
        <button
          type="button"
          onClick={dismiss}
          aria-label="Dismiss alert"
          className="shrink-0 rounded-md p-1 opacity-60 transition-opacity hover:opacity-100"
        >
          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      )}
    </div>
  );
});
 
// Uso
function SettingsPage() {
  const [saved, setSaved] = useState(false);
 
  return (
    <div className="space-y-4">
      {saved && (
        <Alert
          variant="success"
          title="Configuración guardada"
          dismissible
          autoClose={5000}
          onDismiss={() => setSaved(false)}
        >
          Tus preferencias han sido actualizadas exitosamente.
        </Alert>
      )}
 
      <Alert
        variant="warning"
        title="Compatibilidad del navegador"
        action={{ label: "Saber más", onClick: () => console.log("clicked") }}
      >
        Algunas características podrían no funcionar en Internet Explorer 11.
      </Alert>
 
      <Alert variant="error" title="Conexión fallida" dismissible>
        No se puede alcanzar el servidor. Verifica tu red e intenta de nuevo.
      </Alert>
    </div>
  );
}

Aspectos clave:

Cierre automático con limpieza -- la prop autoClose acepta una duración en milisegundos y descarta automáticamente la alerta. El timeout se limpia al desmontar para evitar actualizaciones de estado en componentes removidos.
Animación de salida -- el descarte desencadena un desvanecimiento de opacidad de 200ms estableciendo el estado exiting antes de remover el elemento, dando una sensación pulida sin requerir una librería de animación.
aria-live adaptativo -- las alertas de error usan aria-live="assertive" para interrumpir el lector de pantalla inmediatamente, mientras que otras variantes usan "polite" para esperar una pausa natural en el habla.
Anulación de icono -- cada variante proporciona un icono predeterminado, pero la prop icon permite a los consumidores sustituir su propio SVG o componente de icono sin cambiar la estructura del diseño.
Integración de botón de acción -- la prop action opcional coloca un botón inline debajo del mensaje, manteniendo la alerta autocontenida. Esto evita la necesidad de que los consumidores compongan contenido personalizado para patrones comunes de llamada a la acción.
forwardRef -- permite que los componentes padres midan la altura de la alerta para animaciones suave de entrada/salida o para desplazarla a la vista después de la inserción dinámica.

Inconvenientes

role="alert" anuncia en cada re-renderizado -- si el texto de la alerta cambia debido a un re-renderizado del componente padre, el lector de pantalla re-anuncia todo el contenido. Evita colocar alertas dentro de componentes que se re-renderizar frecuentemente, o memoiza la alerta.
El color solo comunicando severidad -- rojo para error y verde para éxito no tiene sentido para usuarios daltónicos. Siempre empareja el color con un icono y texto descriptivo para comunicar el tipo de alerta.
El cierre automático en alertas de error frustra a los usuarios -- los mensajes de error que desaparecen antes de que el usuario tenga tiempo de leerlos y actuar sobre ellos causa confusión. Evita autoClose en variantes de error y advertencia.
El descarte remueve el elemento del DOM -- después del descarte, la alerta se ha ido y no puede ser restaurada sin que el componente padre la remonte. Si necesitas "deshacer descarte", mantén la alerta en el DOM pero visualmente oculta, o gestiona el estado en el componente padre.
Múltiples alertas apiladas sin espaciado -- renderizar varias alertas seguidas sin una utilidad flex/gap o margin crea un diseño visualmente abarrotado. Envuelve las alertas en un contenedor space-y-3.
La región aria-live no se detecta en el renderizado inicial -- los lectores de pantalla solo anuncian cambios a una región aria-live, no su contenido inicial. Si la alerta está presente en la primera pintura, el usuario no la escuchará a menos que navegue a ella manualmente.

Relacionado

Toast -- Los toasts son mensajes flotantes transitorios; las alertas son banners inline persistentes
Badge -- Los badges indican estado en elementos individuales; las alertas comunican mensajes a nivel de página
Modal -- Los modales bloquean la interacción para confirmaciones críticas; las alertas informan sin bloquear
Button -- Las alertas con acciones a menudo contienen botones para respuesta del usuario
Input -- Los errores de validación de formularios funcionan bien con alertas de error en la parte superior del formulario

Alerta

Buscar en la documentación

Alerta