Enlace

Un enlace es un ancla con el subrayado y la paleta de la biblioteca. Se exporta con dos nombres — link y textLink — porque link es también el elemento <link> de javascript-to-html, e importar ambos con un solo nombre es un error de sintaxis. Usa textLink, o importa la biblioteca como espacio de nombres.

Enlace básico

Lee la documentación para empezar.

text('Lee la ', link({ href: '/es/docs' }, 'documentación'), ' para empezar.')

Colores

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'),
)

Discreto

Un enlace discreto hereda el color de alrededor y solo enseña el subrayado al pasar por encima — para listas de enlaces donde un subrayado en cada fila sería ruido.

Rutas Carga de datos Recursos y estilos

stack({ gap: 'xs' },
  link({ href: '/es/docs/routing', subtle: true }, 'Rutas'),
  link({ href: '/es/docs/data', subtle: true }, 'Carga de datos'),
  link({ href: '/es/docs/assets', subtle: true }, 'Recursos y estilos'),
)

Enlaces externos

external añade target="_blank" y el rel que tiene que acompañarlo. Di en el texto del enlace que abre una pestaña nueva, o añade una nota oculta a la vista: una pestaña nueva sin aviso desorienta.

La biblioteca está en npm (se abre en una pestaña nueva).

text(
  'La biblioteca está en ',
  link({ href: 'https://www.npmjs.com/package/sitelo', external: true },
    'npm',
    visuallyHidden(' (se abre en una pestaña nueva)'),
  ),
  '.',
)

En un párrafo

sitelo está construido sobre Vite, renderiza con javascript-to-html, y no envía nada al navegador salvo que se lo pidas.

text({ variant: 'lead' },
  'sitelo está construido sobre ',
  link({ href: 'https://vite.dev', external: true }, 'Vite'),
  ', renderiza con ',
  link({ href: 'https://ht.js.org', external: true }, 'javascript-to-html'),
  ', y no envía nada al navegador salvo que se lo pidas.',
)

Cuándo usar un botón en su lugar

Un enlace navega; un botón ejecuta una acción. Si aquello cambia el estado de la página en vez de llevar al lector a otro sitio, debería ser un button(); y si navega pero debe parecer un botón, dale a button() un href, que dibuja un ancla por debajo.

Un enlace que navega Un enlace con pinta de botón

stack({ direction: 'row', gap: 'md', align: 'center', wrap: true },
  link({ href: '/es/docs' }, 'Un enlace que navega'),
  button({ href: '/es/docs', variant: 'outline' }, 'Un enlace con pinta de botón'),
  button({ variant: 'link' }, 'Un botón con pinta de enlace'),
)

Props

Prop	Tipo	Por defecto	Descripción
`href`	`string`	—	Adónde lleva.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	De qué paleta bebe.
`subtle`	`boolean`	`false`	Hereda el color de alrededor; subrayado solo al pasar por encima.
`external`	`boolean`	`false`	Añade target="_blank" y rel="noopener noreferrer".