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.

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;

Instale o componente via terminal.

npm install @nimbus-ds/help-link

Help Link

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.

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

O Help Link está composto por:

  • Ícone + container (question circle)
  • Texto
  • Ícone (external)
  • Icon
  • Link
  • Uma linha de texto.
  • Duas linhas de texto.

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.

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.