Link

Le lien est un composant cliquable qui permet à l’utilisateur de naviguer vers une nouvelle page ou une autre section de l'interface.

# Usage

Le Lien guide l'utilisateur vers une information ou une ressource complémentaire, en préservant son contexte et en facilitant son retour à sa tâche principale.

Quand l'utiliser
  • Navigation entre les pages : accéder à une autre page, naviguer dans un menu ou rejoindre une section différente du site.

  • Accès à des ressources ou documents : télécharger un document, consulter un guide, accéder à un contenu informatif externe à la page actuelle.

  • Services externes : accéder à un site partenaire, être redirigé vers une plateforme tierce.

Quand ne pas l'utiliser
  • Boutons : on n’utilise pas le lien pour initier ou valider une actions dans un parcours. Dans ce cas, on utilise le button.

Les différents liens

  • Le Standalone Link (lien hors du texte) est isolé du contenu textuel pour être mieux mis en avant. Il peut comporter une icône à droite pour renforcer sa signification. On le privilégie pour : Naviguer vers une page Afficher une information ou une ressource importante dans le parcours utilisateur Répondre à un besoin de visibilité prioritaire

  • L’Inline Link (lien dans le texte) est intégré directement dans un bloc de texte avec la balise html <a>. Il permet de rediriger sans interrompre la lecture. On le privilégie pour : Compléter une information dans un contexte spécifique Afficher une information ou une ressource secondaire dans le parcours utilisateur Préciser une référence ou apporter une aide contextuelle

# Do & Don't

Lien ou bouton

Un lien navigue vers une destination, un bouton exécute une action.

Lien avec icône

Utiliser une icône qui a une signification directe avec le contenu du lien.

Lien externe

Utiliser l’icône “tri-new-tabbed-page” lorsque le lien ouvre un autre onglet ou redirige vers un site externe.