Help Link

1.1.3

O padrão **Help Link** proporciona um acesso direto e contextual à documentação ou recursos de ajuda relevantes dentro da interface do usuário. Seu objetivo é **fornecer suporte proativo, sem interromper o fluxo de trabalho do usuário.** Melhora a autonomia do usuário ao facilitar o acesso a respostas rápidas, especialmente em momentos de incerteza.

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;

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/help-link

Help Link

Quando usar

Utilizar o Help Link quando:

O usuário possa ter dúvidas ou requerer assistência pontual em uma tarefa.
Quiser fornecer acesso direto ao Centro de Ajuda ou conteúdo de suporte relacionado.
A funcionalidade seja nova, complexa ou tenha particularidades que não são autoexplicativas.

Quando não usar

Evitar o Help Link quando:

A interface já seja completamente autoexplicativa ou contenha ajuda inline suficiente.
Não haja recursos de ajuda relevantes, atualizados ou específicos ao contexto.
O Help Link gere redundância com outros elementos de assistência visual presentes.

Critérios de usabilidade e produtividade

Evitar distrações desnecessárias: o Help Link não interrompe o fluxo nem bloqueia ações.
Feedback imediato: abrir o recurso de ajuda em uma nova aba sem perda de contexto.
Autonomia do usuário: reduz a necessidade de contatar suporte para tarefas comuns.
Acesso rápido: colocar o link em lugares estratégicos para que esteja disponível justamente quando o usuário precisa.

Acessibilidade

Usar aria-label para descrever o propósito do link.
Assegurar foco visível quando é navegado com teclado.
O texto do link deve ser claro e legível.
Áreas táteis adequadas em dispositivos móveis (mínimo 44x44px).
Garantir contraste suficiente entre o link e o fundo.

Anatomia

O Help Link está composto por:

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

Dependências

Icon
Link

Variantes

Uma linha de texto.
Duas linhas de texto.

Do and Don'ts

✅ Do

Localizá-lo junto a conteúdos complexos ou em pontos críticos do fluxo.
Assegurar que o conteúdo vinculado seja útil, específico e atualizado.
Verificar que o link se abra em nova aba.

❌ Don't

Não usá-lo para redirecionar a conteúdos genéricos ou não relacionados.
Não colocar vários Help Links na mesma tela.
Não substituir ou modificar os ícones 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.