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.

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;

Instalá el componente via terminal.

npm install @nimbus-ds/help-link

Help Link

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.

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.
  • 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.
  • 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.

El Help Link está compuesto por:

  • Ícono + container (question circle)
  • Texto
  • Ícono (external)
  • Icon
  • Link
  • Una línea de texto.
  • Dos líneas de texto.

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.

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

HelpLink

NameTypeDefaultDescription

children*

ReactNode

Content to be rendered inside the HelpLink component.