Alert

Fondo muy sutil + borde en el tono semántico (ver Colores) — no relleno sólido como Button, no tintado como Badge. El ícono es opcional: cualquier <svg> pasado como hijo directo se posiciona solo, sin prop dedicada ni set de íconos propio.

Playground

Variant

Icon

Título

Descripción del mensaje.

<Alert>
  <InfoIcon />
  <AlertTitle>Título</AlertTitle>
  <AlertDescription>Descripción del mensaje.</AlertDescription>
</Alert>

Todas las variantes

Nota

Mensaje neutral, sin tono de estado.

Listo

La plantilla se guardó correctamente.

Error

No se pudo procesar el pago.

Atención

Tu sesión expira en 5 minutos.

Info

Las plantillas nuevas salen los martes.

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "./lib/cn";

const alertVariants = cva(
  // an <svg> passed as a direct child auto-positions itself and pushes
  // the text over — no icon prop needed, works with whatever icon set
  // the consumer already has
  "relative w-full rounded-md border p-4 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:h-4 [&>svg]:w-4 [&:has(svg)]:pl-11",
  {
    variants: {
      variant: {
        default: "border-border bg-background",
        primary: "border-primary/30 bg-primary/5 [&>svg]:text-primary",
        success: "border-success/30 bg-success/5 [&>svg]:text-success",
        danger: "border-danger/30 bg-danger/5 [&>svg]:text-danger",
        warning: "border-warning/30 bg-warning/5 [&>svg]:text-warning",
        info: "border-info/30 bg-info/5 [&>svg]:text-info",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
);

export interface AlertProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof alertVariants> {}

export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
  ({ className, variant, ...props }, ref) => (
    <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
  ),
);
Alert.displayName = "Alert";

export const AlertTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h5 ref={ref} className={cn("font-medium leading-none", className)} {...props} />
  ),
);
AlertTitle.displayName = "AlertTitle";

export const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => (
    <p ref={ref} className={cn("mt-1 text-muted-foreground", className)} {...props} />
  ),
);
AlertDescription.displayName = "AlertDescription";

Código real de packages/ui/src/alert.tsx.

Uso

import { Alert, AlertTitle, AlertDescription } from "./components/ui/alert";
import { CheckCircleIcon } from "./icons";

<Alert variant="success">
  <CheckCircleIcon />
  <AlertTitle>Listo</AlertTitle>
  <AlertDescription>La plantilla se guardó correctamente.</AlertDescription>
</Alert>

API

Componente	Prop	Tipo	Default
Alert	variant	default \| primary \| success \| danger \| warning \| info	default
AlertTitle	—	atributos nativos de h5
AlertDescription	—	atributos nativos de p

Tres piezas, no una — igual que label + Input + mensaje en Input, se componen en vez de resolverse con props sueltas.