Ligação

Uma ligação é uma âncora com o sublinhado e a paleta da biblioteca. É exportada com dois nomes — link e textLink — porque link é também o elemento <link> do javascript-to-html, e importar ambos com um só nome é um erro de sintaxe. Usa textLink, ou importa a biblioteca como espaço de nomes.

Ligação básica

Lê a documentação para começar.

text('Lê a ', link({ href: '/pt/docs' }, 'documentação'), ' para começar.')

Cores

Primary Neutral Success Warning Danger

stack({ direction: 'row', gap: 'lg', wrap: true },
  link({ href: '#', color: 'primary' }, 'Primary'),
  link({ href: '#', color: 'neutral' }, 'Neutral'),
  link({ href: '#', color: 'success' }, 'Success'),
  link({ href: '#', color: 'warning' }, 'Warning'),
  link({ href: '#', color: 'danger' }, 'Danger'),
)

Discreta

Uma ligação discreta herda a cor à volta e só mostra o sublinhado ao passar o rato — para listas de ligações em que um sublinhado por linha seria ruído.

Rotas Carregamento de dados Recursos e estilos

stack({ gap: 'xs' },
  link({ href: '/pt/docs/routing', subtle: true }, 'Rotas'),
  link({ href: '/pt/docs/data', subtle: true }, 'Carregamento de dados'),
  link({ href: '/pt/docs/assets', subtle: true }, 'Recursos e estilos'),
)

Ligações externas

external acrescenta target="_blank" e o rel que tem de vir com ele. Diz no texto da ligação que abre um separador novo, ou acrescenta uma nota escondida visualmente — um separador novo sem aviso desorienta.

A biblioteca está no npm (abre num separador novo).

text(
  'A biblioteca está no ',
  link({ href: 'https://www.npmjs.com/package/sitelo', external: true },
    'npm',
    visuallyHidden(' (abre num separador novo)'),
  ),
  '.',
)

Num parágrafo

O sitelo assenta no Vite, desenha com o javascript-to-html, e não envia nada para o navegador a não ser que peças.

text({ variant: 'lead' },
  'O sitelo assenta no ',
  link({ href: 'https://vite.dev', external: true }, 'Vite'),
  ', desenha com o ',
  link({ href: 'https://ht.js.org', external: true }, 'javascript-to-html'),
  ', e não envia nada para o navegador a não ser que peças.',
)

Quando usar antes um botão

Uma ligação navega; um botão executa uma ação. Se a coisa muda o estado da página em vez de levar o leitor a outro lado, deve ser um button() — e se navega mas deve parecer um botão, dá um href ao button(), que desenha uma âncora por baixo.

Uma ligação que navega Uma ligação com ar de botão

stack({ direction: 'row', gap: 'md', align: 'center', wrap: true },
  link({ href: '/pt/docs' }, 'Uma ligação que navega'),
  button({ href: '/pt/docs', variant: 'outline' }, 'Uma ligação com ar de botão'),
  button({ variant: 'link' }, 'Um botão com ar de ligação'),
)

Props

Prop	Tipo	Predefinição	Descrição
`href`	`string`	—	Para onde vai.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	De que paleta bebe.
`subtle`	`boolean`	`false`	Herda a cor à volta; sublinhado só ao passar o rato.
`external`	`boolean`	`false`	Acrescenta target="_blank" e rel="noopener noreferrer".