Link

Présentation

Les liens TDS sont accessibles, contrastés et cohérents avec la charte institutionnelle. La classe .tds-link s’applique aux liens de contenu ; les boutons de navigation utilisent .tds-button--tertiary.

Lien vs Bouton

Élément	Quand l’utiliser
<a class="tds-link">	Navigation vers une autre page ou ressource
<a class="tds-button">	Navigation qui ressemble à une action
<button class="tds-button">	Action qui modifie l’état (soumettre, supprimer)
<button class="tds-button--tertiary">	Action secondaire discrète dans un formulaire

Démo

Ouvrir le terrain de jeu complet →

Design

Variante	Classe	Usage
Standard	tds-link	Lien de contenu par défaut
Muted	tds-link--muted	Liens secondaires (footer, mentions)
Danger	tds-link--danger	Lien vers une action destructive
External	tds-link--external	Lien sortant du site
Nav	tds-link--nav	Lien de navigation (sans soulignement)
Standalone	tds-link--standalone	Call-to-action avec flèche

Code

Importation

@import "@tds-tchad/core/components/link/link.css";

Variantes

<!-- Lien standard -->
<a href="/services" class="tds-link">Accéder aux services en ligne</a>

<!-- Lien atténué -->
<a href="/mentions-legales" class="tds-link tds-link--muted">Mentions légales</a>

<!-- Lien de danger (confirmation de suppression) -->
<a href="/supprimer" class="tds-link tds-link--danger">Supprimer ce dossier</a>

<!-- Lien externe -->
<a href="https://gouv.td" class="tds-link tds-link--external" target="_blank" rel="noopener noreferrer">
  Portail officiel du Gouvernement du Tchad
</a>

<!-- Lien standalone (CTA de contenu) -->
<a href="/dossier/001234" class="tds-link tds-link--standalone">
  Voir le dossier complet
</a>

Accessibilité

<!-- Lien externe — avertir l'utilisateur -->
<a href="https://..." class="tds-link tds-link--external"
   target="_blank" rel="noopener noreferrer"
   aria-label="Portail officiel — s'ouvre dans un nouvel onglet">
  Portail officiel
</a>

<!-- Lien avec contexte supplémentaire pour les AT -->
<a href="/dossier/001234" class="tds-link">
  Consulter
  <span class="sr-only">le dossier REF-2024-001234</span>
</a>