Hyperlink
Os famosos hyperlinks, eventualmente também conhecidos em português como âncoras, dispensam apresentações. Embora não sejam tão recorrentes em sistemas internos quanto em websites em geral, eventualmente servem como boas ferramentas para transitar o usuário de um conteúdo para outro, principalmente quando esta interligação ocorre através de palavras em meio a textos.
Procurando um componente pronto para uso?
Veja o CpsLink do CPS Elements, um componente web fácil de usar, seja nativamente ou com os frameworks de sua preferência, e totalmente aderente ao CPS Design System.
Variações
Este componente não possui variações, apenas se adaptando ao modo de cor em uso.
Dicas
Neste design system, as âncoras que apontam para endereços externos possuem sim uma variação, pois apresentam um ícone de seta denotando que um conteúdo externo será aberto. Caso não tenha percebido até agora, observe esta âncora apontando para o website do CPS. Embora seja um comportamento válido e útil aqui, não é esperado que seja necessário em sistemas internos.
Boas práticas
Para que este componente seja utilizado da melhor maneira possível, observe as práticas a seguir.
Exibição e comportamento
Âncoras textuais normalmente fluem junto ao texto em que estão inseridas, portanto não possuem especificações de medidas a não ser o tamanho da fonte coerente com o texto em que se localizam.
Entretanto, hyperlinks também pode ser utilizados como containers de outros elementos, como cards e imagens. Neste caso, eles apenas embrulham seus elementos filhos e não possuem qualquer interferência no layout padrão.
Acessibilidade
Complementarmente, hyperlinks também demandam acessibilidade adequada. Desta forma, tanto âncoras textuais quanto aquelas utilizadas como containers deve ser adequadamente acessíveis por teclado e apresentarem o estado :focus-visible.
Já sobre os estados :hover e :active em um hyperlink não textual, é importante que os elementos filhos que ele embrulha se responsabilizem por sinalizar tais mudanças de estado adequadamente.