Link

O componente Link é usado para criar links com páginas internas ou externas. Por padrão ele renderiza uma tag <a>.

Importação

import { Link } from '@escaletech/delta'

Utilização

Editor de código

<Link href='/'>Clique aqui</Link>

<Link href='/'>Clique aqui</Link>

Resultado

Loading...

Link no fundo colorido

Para melhor visualização em fundos coloridos deverá ser usado a props light com valor true, o qual deixará a cor do link como branco.

Editor de código

<Base background='$primaryMedium'> <Container> <Link href='/' light> Link em fundo colorido </Link> </Container> </Base>

  <Base background='$primaryMedium'>
    <Container>
      <Link href='/' light>
        Link em fundo colorido
      </Link>
    </Container>
  </Base>

Resultado

Loading...

Tamanho

Você pode deixar o link ocupando o espaço inteiro de largura com a props fullWidth.

Editor de código

<Base background='$primaryMedium'> <Container> <Link href='/' light fullWidth> Link </Link> </Container> </Base>

  <Base background='$primaryMedium'>
    <Container>
      <Link href='/' light fullWidth>
        Link
      </Link>
    </Container>
  </Base>

Resultado

Loading...

Customização

Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de tema.

import { extendsTheme } from '@escaletech/delta'

export const theme = extendsTheme({
  colors: {
    linkColor: 'red',
    linkColorActive: 'orange',
    linkColorHover: 'blue'
  }
})

Tokens

Token	Descrição
colors.linkColor	Cor da fonte do link padrão
colors.linkColorActive	Cor da fonte do link ativo
colors.linkColorHover	Cor da fonte do link com mouse em cima

Props

Propriedade	Descrição	Tipo	Padrão	Obrigatório
href	URL que será redirecionado	string	-	✅
children	Conteúdo do componente	ReactNode	-	✅
fullWidth	Se for true, o link ocupará o espaço inteiro.	boolean	false	❌
light	Se for true, o link ficará branco.	boolean	false	❌

Aceita todas as propriedades suportadas por anchors nativos.