componentes

link (beta)

Links são componentes de texto usados para navegar entre páginas.

índice

standalone link

demo interativa

Uma versão de interativa do componente desenvolvido.

propriedades para estilização (styled props)

Recomendamos que o componente siga as propriedades padrões, mencionadas na sessão acima. Porém, ele também possui as seguintes propriedades do @olist/styled-system para atender cenários não mapeados:

inline link

propriedades*

propertydescriptionrequireddefault valuetype

size

Define the link size. Works only if type is standalone

falsemediummediumlarge

type

Define the type of the link

falsestandaloneinlinestandalone

iconLeft

An Icon component from @olist/design-system-icons to be used in the left side of the link. Works only if type is standalone

falseundefinedReactNode

iconRight

An Icon component from @olist/design-system-icons to be used in the right side of the link. Works only if type is standalone

falseundefinedReactNode

*valores gerados automaticamente.

formatação

Link escrito link e um ícone de seta a direita. Dois marcadores, o de número um destacando o texto e o de número 2 destacando o ícone.
  1. Label: pequeno texto que indica a ação executada pelo botão.
  2. Icon: ícone que auxilia na identificação da função do botão.

uso

Links são usados para navegar de uma página para outra, seja interna ou externa. Também podem ser usados para fazer download de arquivos. Para realizar ações na interface (editar, deletar etc), utilize os botões.

Ilustração de página web com formulário de login. No fim da página, um botão para fazer login e um link para recuperar senha.
certoUse para levar para outras páginas.
Ilustração de página web com formulário de login. No fim da página, um link para fazer login e um link para recuperar senha.
erradoNão use para realizar ações.

variações

Existem dois tipos de links, que devem ser usados conforme o contexto em que eles estarão inseridos.

Confira na tabela a seguir.

variaçãoutilização
standalone linkLinks que aparecem sozinhos ou agrupados a outros links.
inline linkLinks que aparecem no meio de um texto.

icons

variaçãoutilização
leftPara mostrar uma lista de links, indicando sua categoria.
rightPara indicar navegação. Especialmente para destacar se o link é externo ou interno.
nonePara inline links.

grupos e alinhamento

  • Inline links: usa-se com o mesmo espaçamento e tamanho do texto.
  • Standalone link: pode ser utilizado sozinho ou em lista. Caso esteja agrupado, utiliza o espaçamento $spacing-stack-small entre links.

guia de conteúdo

  • O nome do link deve ser consistente com o título da página que ele se relaciona.
  • Escreva links com significado, para que seja possível sua identificação mesmo fora de contexto.
  • Prefira links longos e explicativos aos curtos e vagos.
  • Procure usar verbos no infinitivo para standalone links.
Ilustração de página web com título e dois cards ilustrativos. No primeiro, está escrito componentes e possui um link na base escrito conferir componentes. No segundo, está escrito tokens e possui um link na base escrito conferir tokens.
certoEscreva links com significados.
Ilustração de página web com título e dois cards ilustrativos. No primeiro, está escrito componentes e possui um link na base escrito saiba mais. No segundo, está escrito tokens e possui um link na base escrito saiba mais.
erradoNão escreva links genéricos.

guia de design

  • Tem guia de uso.
  • Tem guia de conteúdo.
  • Use os design tokens.
  • Tem símbolo no Figma.
  • Possui motion.
  • Possui versão web.
  • Possui versão responsiva.
  • Possui versão mobile.
  • É acessível via leitor de tela.
  • Texto possui contraste acessível (WCAG 2.0 - Nível AA).

conteúdo relacionado

Migração do United para Olist Design System

Propriedades

UnitedOlist Design System
hrefhref
sizesize
variation❌
fullWidth❌
iconiconLeft
❌iconRight
loading❌
❌type

Tamanhos Existentes

UnitedOlist Design System
small❌
defaultmedium
largelarge

Variações Existentes

UnitedOlist Design System
primary❌
danger❌
alternate❌
default❌
link❌