Feedback

Etiqueta corta para marcar estados, categorías o conteos. Por defecto en variante soft (fondo tintado + texto oscuro); variante solid cuando se necesita mayor contraste (sobre imágenes, tarjetas oscuras).

<Badge variant="success">Activo</Badge>
<Badge variant="danger" solid>Crítico</Badge>
<Badge variant="accent" count>12</Badge>
<Badge variant="success" dot />

Indicador de estado con semáforo de color integrado (dot delante). Se usa en tablas, headers de entidad y listas para comunicar el estado de un registro a golpe de vista.

<Pill variant="success">Publicado</Pill>
<Pill variant="warning" size="sm">Borrador</Pill>

Mensaje informativo inline, embebido en el flujo de la página. Para notificaciones no intrusivas usar Toast; para bloqueos usar Modal.

<Alert variant="warning" title="Hay cambios sin guardar" closable>
  Si sales ahora perderás las modificaciones.
</Alert>

Notificación flotante que aparece en la esquina (por defecto bottom-right), auto-desaparece a los 5s y puede apilarse. Se dispara imperativamente con la función toast(), no se renderiza en JSX salvo para el <Toaster /> provider.

// 1. Añadir el Toaster una vez en el root de la app
<Toaster position="bottom-right" />

// 2. Disparar toasts imperativamente
toast.success("Artículo guardado", { description: "Se ha publicado." });
toast.error("No se pudo eliminar");
toast.warning("Sincronización parcial", {
  description: "3 de 24 no se actualizaron.",
  actions: [
    { label: "Ver detalle", onClick: openDetail },
    { label: "Reintentar", onClick: retry },
  ]
});
toast.info("Exportación en curso", { duration: 0 });

Barra de progreso lineal. Usa value determinado (0–100) para operaciones medibles; indeterminate para procesos sin cuantificar (cargando datos, guardando).

<Progress value={62} />
<Progress value={100} variant="success" />
<Progress indeterminate />

Indicador circular de carga. Para cargas dentro de botones usar <Button loading />; para áreas de contenido mayores, combinar con overlay o usar Skeleton.

<Spinner />
<Spinner size="sm" />
<Spinner color="white" />  // sobre fondo leading

Placeholder animado que reproduce la silueta del contenido real mientras se carga. Preferible al spinner para listas y cards: reduce la percepción de espera y mantiene la estabilidad del layout.

<Skeleton variant="title" width="60%" />
<Skeleton variant="text" lines={3} />
<Skeleton variant="circle" size={40} />
<Skeleton variant="rect" width={56} height={56} />

Pantalla de contenido vacío. Obligatorio incluir al menos una acción primaria que desbloquee al usuario (crear, importar, invitar). Nunca mostrar solo el mensaje.

<Empty
  icon={<IconSearch />}
  title="No encontramos artículos"
  description="Prueba con otros términos o quita los filtros."
  actions={[
    <Button variant="secondary">Quitar filtros</Button>,
    <Button variant="primary">Nuevo artículo</Button>
  ]}
/>