Comparaison comportementale

Bouton vs Lien

Choisir Bouton pour : Envoyer ou réinitialiser un formulaire. Choisir Lien pour : Atteindre une autre page ou route.

Décision

Question de famille

Le contrôle déclenche-t-il une action, change-t-il de destination ou doit-il rester iconique ?

Règle pour cette paire

Choisis Bouton si Button exécute une action ; Link navigue vers une destination, tandis qu'Icon button est la variante compacte dont le libellé visible est remplacé par une icône.. Choisis Lien si Link navigue et possède un href ; Button exécute une action, tandis qu'Icon button reste une action même représentée uniquement par une icône..

Dimension	BoutonButton	LienLink
Déclenchement	Clic, toucher, Entrée ou Espace sur le contrôle nommé.	Clic, toucher ou Entrée sur le texte lié ou sa destination nommée.
Modalité	Contrôle d’action non modal ; un éventuel résultat modal est un composant distinct.	Navigation, pas action modale ; change de destination ou ouvre une ressource.
Positionnement	Dans le formulaire, la barre d’outils ou la zone où la commande s’applique.	Dans le contenu ou une région de navigation où la destination a du sens.
Interactivité	Exécute une action et expose un état désactivé ou en attente si une double activation est risquée.	Expose une URL et les comportements standard du navigateur comme ouvrir ou copier la destination.
Focus	Un indicateur de focus contrasté reste visible dans chaque variante active et pendant l'attente.	Chaque lien possède un focus visible et sa cible ne chevauche pas les liens voisins.
Fermeture	Sans objet : un bouton d'action n'ouvre pas de surface sauf si cette relation distincte est définie.	Sans objet : la navigation est gérée par l'historique du navigateur, pas par la fermeture du lien.
Rôle accessible	button	a[href]
Cas d’usage	Envoyer ou réinitialiser un formulaire	Atteindre une autre page ou route
Comportement mobile	Fournir une grande cible tactile et distinguer visuellement les actions principales et destructives.	Donner aux liens isolés assez de surface et d’espacement tout en préservant la lecture des liens en ligne.

Essayer Bouton Essayer Lien

Dimension

BoutonButton

LienLink

Déclenchement

Clic, toucher, Entrée ou Espace sur le contrôle nommé.

Clic, toucher ou Entrée sur le texte lié ou sa destination nommée.

Modalité

Contrôle d’action non modal ; un éventuel résultat modal est un composant distinct.

Navigation, pas action modale ; change de destination ou ouvre une ressource.

Positionnement

Dans le formulaire, la barre d’outils ou la zone où la commande s’applique.

Dans le contenu ou une région de navigation où la destination a du sens.

Interactivité

Exécute une action et expose un état désactivé ou en attente si une double activation est risquée.

Expose une URL et les comportements standard du navigateur comme ouvrir ou copier la destination.

Focus

Un indicateur de focus contrasté reste visible dans chaque variante active et pendant l'attente.

Chaque lien possède un focus visible et sa cible ne chevauche pas les liens voisins.

Fermeture

Sans objet : un bouton d'action n'ouvre pas de surface sauf si cette relation distincte est définie.

Sans objet : la navigation est gérée par l'historique du navigateur, pas par la fermeture du lien.

Rôle accessible

button

a[href]

Cas d’usage

Envoyer ou réinitialiser un formulaire

Atteindre une autre page ou route

Comportement mobile

Fournir une grande cible tactile et distinguer visuellement les actions principales et destructives.

Donner aux liens isolés assez de surface et d’espacement tout en préservant la lecture des liens en ligne.