Lien

Un lien est une ancre avec le soulignement et la palette de la bibliothèque. Il est exporté sous deux noms — link et textLink — parce que link est aussi l’élément <link> de javascript-to-html, et importer les deux sous un seul nom est une erreur de syntaxe. Utilisez textLink, ou importez la bibliothèque comme espace de noms.

Lien de base

Lisez la documentation pour commencer.

text('Lisez la ', link({ href: '/fr/docs' }, 'documentation'), ' pour commencer.')

Couleurs

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

Discret

Un lien discret hérite de la couleur environnante et n’affiche son soulignement qu’au survol — pour les listes de liens où un soulignement à chaque ligne ne serait que du bruit.

Routage Chargement de données Ressources et styles

stack({ gap: 'xs' },
  link({ href: '/fr/docs/routing', subtle: true }, 'Routage'),
  link({ href: '/fr/docs/data', subtle: true }, 'Chargement de données'),
  link({ href: '/fr/docs/assets', subtle: true }, 'Ressources et styles'),
)

Liens externes

external ajoute target="_blank" et le rel qui doit l’accompagner. Dites dans le texte du lien qu’il ouvre un nouvel onglet, ou ajoutez une note masquée visuellement — un nouvel onglet sans avertissement désoriente.

La bibliothèque est sur npm (s’ouvre dans un nouvel onglet).

text(
  'La bibliothèque est sur ',
  link({ href: 'https://www.npmjs.com/package/sitelo', external: true },
    'npm',
    visuallyHidden(' (s’ouvre dans un nouvel onglet)'),
  ),
  '.',
)

Dans un paragraphe

sitelo est bâti sur Vite, rend avec javascript-to-html, et n’envoie rien au navigateur si vous ne le demandez pas.

text({ variant: 'lead' },
  'sitelo est bâti sur ',
  link({ href: 'https://vite.dev', external: true }, 'Vite'),
  ', rend avec ',
  link({ href: 'https://ht.js.org', external: true }, 'javascript-to-html'),
  ', et n’envoie rien au navigateur si vous ne le demandez pas.',
)

Quand prendre un bouton à la place

Un lien navigue ; un bouton exécute une action. Si la chose change l’état de la page au lieu d’emmener le lecteur ailleurs, ce doit être un button() — et si elle navigue mais doit ressembler à un bouton, donnez un href à button(), qui rend alors une ancre en dessous.

Un lien qui navigue Un lien qui ressemble à un bouton

stack({ direction: 'row', gap: 'md', align: 'center', wrap: true },
  link({ href: '/fr/docs' }, 'Un lien qui navigue'),
  button({ href: '/fr/docs', variant: 'outline' }, 'Un lien qui ressemble à un bouton'),
  button({ variant: 'link' }, 'Un bouton qui ressemble à un lien'),
)

Props

Prop	Type	Défaut	Description
`href`	`string`	—	Où il mène.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	La palette utilisée.
`subtle`	`boolean`	`false`	Hérite de la couleur environnante ; soulignement au survol seulement.
`external`	`boolean`	`false`	Ajoute target="_blank" et rel="noopener noreferrer".