Help Link

1.1.3

El patrón Help Link proporciona un acceso directo y contextual a la documentación o recursos de ayuda relevantes dentro de la interfaz de usuario. Su objetivo es brindar soporte proactivo, sin interrumpir el flujo de trabajo del usuario. Mejora la autonomía del usuario al facilitar el acceso a respuestas rápidas, especialmente en momentos de incertidumbre.

Basic Help Link

import React, { useState } from "react";
import { HelpLink } from "@nimbus-ds/patterns";
import { Icon, Link } from "@nimbus-ds/components";
import { ExternalLinkIcon } from "@nimbus-ds/icons";

const Example: React.FC = () => {
  return (
    <HelpLink>
      <Link
        as="a"
        href="https://nimbus.tiendanube.com/"
        target="_blank"
        appearance="primary"
        textDecoration="none"
      >
        Help link
        <Icon source={<ExternalLinkIcon />} color="currentColor" />
      </Link>
    </HelpLink>
  );
};

export default Example;

Implementación

Instalá el componente via terminal.

npm install @nimbus-ds/help-link

Help Link

Cuándo usar

Utilizar el Help Link cuando:

El usuario pueda tener dudas o requerir asistencia puntual en una tarea.
Quieras brindar acceso directo al Centro de Ayuda o contenido de soporte relacionado.
La funcionalidad sea nueva, compleja o tenga particularidades que no son autoexplicativas.

Cuándo no usar

Evitar el Help Link cuando:

La interfaz ya sea completamente autoexplicativa o contenga ayuda inline suficiente.
No haya recursos de ayuda relevantes, actualizados o específicos al contexto.
El Help Link genere redundancia con otros elementos de asistencia visual presentes.

Criterios de usabilidad y productividad

Evitar distracciones innecesarias: el Help Link no interrumpe el flujo ni bloquea acciones.
Feedback inmediato: abrir el recurso de ayuda en una nueva pestaña sin pérdida de contexto.
Autonomía del usuario: reduce la necesidad de contactar soporte para tareas comunes.
Acceso rápido: colocar el link en lugares estratégicos para que esté disponible justo cuando el usuario lo necesita.

Accesibilidad

Usar aria-label para describir el propósito del enlace.
Asegurar foco visible cuando es navegado con teclado.
El texto del enlace debe ser claro y legible.
Áreas táctiles adecuadas en dispositivos mobiles (mínimo 44x44px).
Garantizar contraste suficiente entre el enlace y el fondo.

Anatomía

El Help Link está compuesto por:

Ícono + container (question circle)
Texto
Ícono (external)

Dependencias

Icon
Link

Variantes

Una línea de texto.
Dos líneas de texto.

Do and Don'ts

✅ Do

Ubicarlo junto a contenidos complejos o en puntos críticos del flujo.
Asegurar que el contenido vinculado sea útil, específico y actualizado.
Verificar que el enlace se abra en nueva pestaña.

❌ Don't

No usarlo para redireccionar a contenidos genéricos o no relacionados.
No colocar varios Help Links en la misma pantalla.
No reemplazar o modificar los íconos predefinidos.

Props

Additional props are passed to the <HelpLink> element. See div docs for a list of props accepted by the <HelpLink> element.

HelpLink

Name	Type	Default	Description
children*	ReactNode		Content to be rendered inside the HelpLink component.