Link

Stable

Link sert exclusivement a la navigation. Il conserve le comportement natif du navigateur, reste identifiable dans le texte et expose un focus visible.

Variants

Consulter les tokens de couleur du design system.

Voir les logos Sirdata Ouvrir sirdata.com

Variant	Role
inline	Lien dans un paragraphe
standalone	Navigation secondaire autonome
inverse	Lien sur une surface sombre
external	Ouvre une ressource externe dans un nouvel onglet

States

• default utilise --link-text-default.
• hover renforce le contraste et conserve un signal de lien.
• focus-visible utilise un outline distinct.
• visited est gere par --link-text-visited.
• Link ne possede pas d’etat disabled. Retirer le lien si la destination n’est pas disponible.

Astro

---
import Link from '../components/ui/Link.astro';
---

<p>
  Consulter les <Link href="/privacy/">regles de confidentialite</Link>.
</p>

<Link href="https://sirdata.com" variant="standalone" external>
  Decouvrir Sirdata
</Link>

HTML output

<a href="/privacy/" class="pixel-link pixel-link--inline">
  Regles de confidentialite
</a>

Tokens

--link-text-default, --link-text-hover, --link-text-focus, --link-text-visited, --link-focus-ring, ainsi que les styles --text-label-md-* pour la variante standalone.

Do / Don’t

Do	Don’t
Utiliser Link pour changer d’URL.	Utiliser Button pour une simple navigation.
Garder un libelle qui decrit la destination.	Utiliser Cliquez ici.
Signaler explicitement un lien externe dans le contexte.	Ouvrir un nouvel onglet sans raison.
Conserver le soulignement dans le texte courant.	Distinguer un lien uniquement par une couleur subtile.

Accessibility

Le texte du lien doit avoir du sens hors contexte. La zone de focus doit rester visible. Pour les liens externes, informer l’utilisateur dans le libelle ou le contexte lorsque l’ouverture d’un nouvel onglet peut surprendre.