Link
O componente Link nos permite navegar entre páginas no mesmo site ou para outros sites.
import React from "react";
import { Link } from "@nimbus-ds/components";
const Example: React.FC = () => (
<Link as="a" href="mailto: hola@tiendanube.com">
Link
</Link>
);
export default Example;O componente é composto por um texto, além de ícones opcionais.
Utilizamos esse componente de forma independente, dentro de outros componentes ou em meio ao texto. Atualmente o Link possui 3 variantes com usos distintos, além da possibilidade de incluir um ícone.
Essa variante é utilizada para destacar links importantes para a navegação do usuário, por ter a cor azul o uso do underline é opcional. É permitida a repetição desse tipo de link em uma mesma página, porém não mais de uma vez por elemento.
Essa é a variante utilizada para ações neutras e complementares, pode acompanhar a variante Primary ou Danger nos casos onde temos ações opostas. Por exemplo: Se o Primary Link é "Salvar" o Default Link deve ser "Cancelar".
Essa variante é utilizada para destacar links com ação destrutiva, onde o uso do componente Button Danger tenha um protagonismo visual além do necessário.
Utilizamos os ícones para reforçar a mensagem do link ou informar que o seu endereço é externo, eles podem ser aplicados antes ou depois do texto.
O texto do Link deve descrever claramente a ação fazendo referência a mesma utilizando uma linguagem coloquial e dirigida diretamente ao usuário. Por exemplo: usamos "Editar categorias" e não "Categorias".
Os Links externos devem estar sempre acompanhados por um ícone que ajude a ilustrar o que acontecerá ao clicá-lo, com o objetivo de reforçar a mensagem e fornecer mais recursos visuais.
Por exemplo, quando o link executa uma ação de navegação para um link externo, devemos utilizar um ícone para indicar que o usuário será direcionado para um outro aplicativo ou página externa.
A exceção a essa regra é quando o Link está dentro do contexto de um parágrafo ou frase, onde podemos evitar utilizar o ícone para manter a estrutura visual do bloco de texto.
- Navegar a outra seção dentro do aplicativo ou site
- Navegar a um outro aplicativo ou página externa
- Executar ações de menor relevância
- Button - Pode ser usado para iniciar ações, fazer mudanças de estado ou de página que requerem maior destaque visual.
Esse componente pode ser renderizado como elemento HTML <button> ou <link>, usando a propriedade as, o que permite herdar todas as propriedades nativas dos elementos HTML para diferentes implementações.
Para proporcionar maior previsibilidade, sempre que um link levar a uma URL externa devemos sinalizar com um ícone de external.
Quando usando links externos não devemos nos esquecer de utilizar um ícone para sinalizar.
O conteúdo dos links deve ser mostrado em uma única linha.
Links sempre devem estar em uma única linha, evitando quebras na sua leitura.
Os ícones utilizados devem ter relação direta e clara com o CTA do link.
Não devemos utilizar ícones onde a relação não é óbvia com o CTA.
A cor do link deve estar alinhada com o teor da mensagem do CTA.
A cor do link deve auxiliar o entendimento do seu conteúdo.
Instale o componente via terminal.
npm install @nimbus-ds/linkAdditional props are passed to the <Link> element. See a docs for a list of props accepted by the <Link> element.