Composant de lien stylisé utilisable sur un <a>
ou un <button>. Fond et bordure transparents,
texte souligné. Disponible en variante neutre (.link)
et en variantes colorées générées automatiquement depuis la map $colors.
Les classes .link et .link-{color}
fonctionnent sur les deux éléments. Sur un <button>,
combinez avec .btn pour réinitialiser les styles natifs du bouton
avant d'appliquer le style link.
| CLASSE | ÉLÉMENT | DESCRIPTION |
|---|---|---|
.link |
<a> <button> |
Variante neutre. Couleur et soulignement en --text-color. Fond et bordure transparents. |
.link-{color} |
<a> <button> |
Variante colorée générée pour chaque entrée de la map $colors. Couleur et soulignement en #{$value}. |
Utilise --text-color — s'adapte automatiquement au thème clair/sombre.
Générées automatiquement via @each $name, $value in $colors. La classe suit le pattern .link-{name}.
| ÉTAT | SÉLECTEUR | DESCRIPTION |
|---|---|---|
| Par défaut | — | Fond et bordure transparents. Couleur et soulignement selon la variante. |
| Hover | :not(:disabled):hover |
Couleur et soulignement en --hover-{name}. Ignoré si l'élément est désactivé. |
| Actif | :not(:disabled):active / .active |
Couleur et soulignement en --active-{name}. La classe .active permet de forcer l'état actif programmatiquement. |
| Focus | :not(:disabled):focus-visible |
Outline supprimé. Bordure colorée + box-shadow semi-transparent via color-mix. Uniquement visible à la navigation clavier. |
| Désactivé | :disabled |
Couleur et soulignement en --link-disabled-color. opacity: 0.5, cursor: not-allowed. Hover et active ignorés. |
| TOKEN | RÔLE |
|---|---|
--link-padding-x |
Padding horizontal |
--link-padding-y |
Padding vertical |
--link-border-radius |
Rayon des coins (utilisé pour le focus visible) |
--link-border-style |
Style de bordure |
--link-border-width |
Épaisseur de bordure (visible uniquement au focus) |
--link-disabled-color |
Couleur du texte et du soulignement à l'état désactivé |
--hover-{name} |
Couleur au hover pour chaque variante colorée |
--active-{name} |
Couleur à l'état actif pour chaque variante colorée |
--hover-defaut |
Couleur au hover pour la variante neutre .link |
--active-defaut |
Couleur à l'état actif pour la variante neutre .link |
/* Global variables */
:root {
--link-padding-x: 0.25rem;
--link-padding-y: 0;
--link-border-radius: 4px;
--link-disabled-color: var(--gray-400);
}
| PRATIQUE | DÉTAIL |
|---|---|
| Focus visible | Le focus est stylisé via border-color + box-shadow uniquement sur :focus-visible — invisible à la souris, visible à la navigation clavier. L'outline natif est supprimé. |
Élément <a> |
Toujours fournir un href sur les liens. Un <a> sans href n'est pas focusable nativement. |
Élément <button> |
Utilisez un <button> si l'action déclenche un comportement JS. L'attribut disabled désactive nativement le focus et les événements. |
| États hover/active | Protégés par :not(:disabled) — un lien désactivé ne change pas de couleur au survol ou au clic. |
L'attribut disabled n'existe pas sur <a> — il n'a aucun effet HTML natif sur cet élément.
Pour désactiver un lien, utilisez un <button> avec disabled,
ou gérez l'état manuellement via aria-disabled="true" + tabindex="-1" + pointer-events: none.
Sur un <button>, toujours combiner avec
.btn pour réinitialiser les styles natifs avant d'appliquer
.link-{color}.
Utiliser .active pour forcer l'état actif programmatiquement
— par exemple pour indiquer la page courante dans une navigation.
Ne pas utiliser .link-{color} seul sur un <button>
sans .btn — les styles natifs du bouton (fond, bordure, padding) peuvent interférer.
Link · WEBDEV-UI DOCS / V1