Comparaison comportementale
Bouton vs Lien
Choisir Bouton pour : Envoyer ou réinitialiser un formulaire. Choisir Lien pour : Atteindre une autre page ou route.
| 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 | native button | native link |
| 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. |