Help Link
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
Name | Type | Default | Description |
---|---|---|---|
children* | ReactNode | Content to be rendered inside the HelpLink component. |