Comparaison comportementale
Bouton vs Lien
Différence décisive
Le Bouton exécute une action dans la page courante ; le Lien mène vers une destination avec un href et le comportement de navigation du navigateur.
Critères de choix, liens et sources
- BoutonChoisis Bouton si l’activation change quelque chose ici, comme envoyer, ouvrir ou supprimer.Ouvrir la fiche Bouton
- LienChoisis Lien si l’activation emmène vers une autre page ou route que l’on peut ouvrir dans un nouvel onglet.Ouvrir la fiche Lien
Voir les neuf dimensionsVoir les sources
Déclencher ou naviguer
Essayer
Le contrôle déclenche-t-il une action, change-t-il de destination ou doit-il rester iconique ?
Bouton
Contexte commun aux essais
Bouton
Mission
Bouton d'action - Button
Activer Enregistrer avec Espace, vérifier que l'attente bloque une seconde requête et corriger une erreur serveur.
Objet : Compte rendu hebdomadaire
Étape 1 sur 3
Essayer
Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.
Comportement et cas limite
- À observer
- Le bouton d'envoi actif possède un libellé clair, un focus visible et un contraste de texte suffisant.
- Cas limite
- Pendant l'envoi, le bouton garde sa largeur, expose Enregistrement et bloque les doubles activations sans retirer le focus.
Lien
Mission
Lien de navigation - Link
Ouvrir Facturation avec Entrée, revenir, puis utiliser le menu contextuel sur le lien d'état externe.
Le service inclut trois espaces partagés.
FacturationDétails de facturation
Cette section est une destination de navigation réelle.
Retour au résuméÉtape 1 sur 3
Essayer
Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.
Comportement et cas limite
- À observer
- Chaque lien descriptif possède une vraie destination et un focus distinct du texte voisin.
- Cas limite
- La destination externe est identifiée dans le texte accessible lorsque son ouverture ou son contexte pourrait surprendre.
Ce que cet essai montre
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.
Lequel convient à ton besoin ?
Bouton
Envoyer ou réinitialiser un formulaire
Lien
Atteindre une autre page ou route
Différence et sources
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.
Consulter les sourcesParties du spécimen
Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.
Contrôle
L'élément interactif qui reçoit la saisie et expose son état.
Décision
Question de famille
Le contrôle déclenche-t-il une action, change-t-il de destination ou doit-il rester iconique ?
Trois critères pour choisir
- Interactivité
Bouton
Exécute une action et expose un état désactivé ou en attente si une double activation est risquée.
Lien
Expose une URL et les comportements standard du navigateur comme ouvrir ou copier la destination.
- Déclenchement
Bouton
Clic, toucher, Entrée ou Espace sur le contrôle nommé.
Lien
Clic, toucher ou Entrée sur le texte lié ou sa destination nommée.
- Rôle accessible
Bouton
button
Lien
a[href]
Neuf dimensions
- Déclenchement
Bouton
Clic, toucher, Entrée ou Espace sur le contrôle nommé.
Lien
Clic, toucher ou Entrée sur le texte lié ou sa destination nommée.
- Modalité
Bouton
Contrôle d’action non modal ; un éventuel résultat modal est un composant distinct.
Lien
Navigation, pas action modale ; change de destination ou ouvre une ressource.
- Positionnement
Bouton
Dans le formulaire, la barre d’outils ou la zone où la commande s’applique.
Lien
Dans le contenu ou une région de navigation où la destination a du sens.
- Interactivité
Bouton
Exécute une action et expose un état désactivé ou en attente si une double activation est risquée.
Lien
Expose une URL et les comportements standard du navigateur comme ouvrir ou copier la destination.
- Focus
Bouton
Un indicateur de focus contrasté reste visible dans chaque variante active et pendant l'attente.
Lien
Chaque lien possède un focus visible et sa cible ne chevauche pas les liens voisins.
- Fermeture
Bouton
Sans objet : un bouton d'action n'ouvre pas de surface sauf si cette relation distincte est définie.
Lien
Sans objet : la navigation est gérée par l'historique du navigateur, pas par la fermeture du lien.
- Rôle accessible
Bouton
button
Lien
a[href]
- Cas d’usage
Bouton
Envoyer ou réinitialiser un formulaire
Lien
Atteindre une autre page ou route
- Comportement mobile
Bouton
Fournir une grande cible tactile et distinguer visuellement les actions principales et destructives.
Lien
Donner aux liens isolés assez de surface et d’espacement tout en préservant la lecture des liens en ligne.
| 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. |