---
title: "Link"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Link using semantic HTML anchors. Consistent hover states, color variants, and underline styles for accessible, theme-aware hyperlinks."
url: https://frutjam.com/fr/components/link
---

# Link Component

Liez les éléments d’ancrage de style des composants avec une hiérarchie visuelle et une signification sémantique. Le système de liens Frutjam prend en charge plusieurs couleurs, effets de survol, tailles et options de décoration via les classes utilitaires CSS Tailwind. Parfaits pour les liens texte, la navigation et les éléments d'appel à l'action, les liens maintiennent les normes d'accessibilité avec une gestion appropriée de la mise au point et des options de bascule de soulignement.

CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

| Classe         | Taper   | Description                                 |
| -------------- | ------- | ------------------------------------------- |
| link           | Base    | Ancre stylisée avec soulignement et couleur |
| link-hover     | Style   | Souligné visible uniquement au survol       |
| link-xs        | Taille  | Très petit                                  |
| link-sm        | Taille  | Petit                                       |
| link-md        | Taille  | Moyen (par défaut)                          |
| link-lg        | Taille  | Grand                                       |
| link-xl        | Taille  | Très grand                                  |
| link-2xl       | Taille  | 2× très grand                               |
| link-primary   | Couleur | Couleur du thème principal                  |
| link-secondary | Couleur | Couleur du thème secondaire                 |
| link-accent    | Couleur | Couleur du thème d'accentuation             |
| link-neutral   | Couleur | Couleur du thème neutre                     |
| link-info      | Couleur | Couleur sémantique de l'information         |
| link-success   | Couleur | Couleur sémantique du succès                |
| link-warning   | Couleur | Couleur sémantique d’avertissement          |
| link-error     | Couleur | Couleur sémantique des erreurs              |

## Utilisation de base

## Couleurs des liens

Appliquez des couleurs de lien sémantique pour correspondre à votre thème ou pour transmettre un sens (par exemple en utilisant `link-error` pour les actions destructrices ou `link-success` pour la confirmation).

```html
<a class="link link-primary">Primary link</a>
<a class="link link-secondary">Secondary link</a>
<a class="link link-accent">Accent link</a>
<a class="link link-success">Success link</a>
<a class="link link-info">Info link</a>
<a class="link link-warning">Warning link</a>
<a class="link link-error">Error link</a>
<a class="link link-neutral">Neutral link</a>
```

## Tailles des liens

Adaptez vos **liens hypertextes** pour qu'ils correspondent à la typographie environnante. Ces classes utilitaires vont de très petite pour le texte « légal » de pied de page à 2X grande pour les sections de héros à fort impact.

```html
<a class="link link-xs">Primary link</a>
<a class="link link-sm">Secondary link</a>
<a class="link link-md">Accent link</a>
<a class="link link-lg">Success link</a>
<a class="link link-xl">Info link</a>
<a class="link link-2xl">Warning link</a>
```

## État de survol du lien

Par défaut, vous pouvez choisir de masquer le soulignement et de le révéler uniquement au survol. Il s'agit d'un modèle de conception courant pour des **menus de navigation** et des barres latérales de tableau de bord plus propres.

```html
<a class="link link-hover">Hover this link</a>
```