Comparaison comportementale

Bouton vs Bouton icône

Choisir Bouton pour : Envoyer ou réinitialiser un formulaire. Choisir Bouton icône pour : Une action familière se répète dans une barre dense.

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 Bouton icône si Icon button exécute une action comme Button mais sans texte visible ; Link exige toujours une vraie destination de navigation..

Dimension	BoutonButton	Bouton icôneIcon button
Déclenchement	Clic, toucher, Entrée ou Espace sur le contrôle nommé.	Clic, toucher, Entrée ou Espace sur le contrôle iconographique.
Modalité	Contrôle d’action non modal ; un éventuel résultat modal est un composant distinct.	Contrôle d’action non modal ; son apparence compacte ne change pas le comportement d’un bouton.
Positionnement	Dans le formulaire, la barre d’outils ou la zone où la commande s’applique.	Dans une barre d’outils ou près de l’objet concerné par son action unique.
Interactivité	Exécute une action et expose un état désactivé ou en attente si une double activation est risquée.	Exécute une action et possède toujours un nom accessible ; l’infobulle reste complémentaire.
Focus	Un indicateur de focus contrasté reste visible dans chaque variante active et pendant l'attente.	Toute la cible du bouton, pas seulement le glyphe, reçoit un focus visible.
Fermeture	Sans objet : un bouton d'action n'ouvre pas de surface sauf si cette relation distincte est définie.	Le bouton lui-même ne se ferme pas ; toute surface contrôlée suit son propre contrat.
Rôle accessible	button	button
Cas d’usage	Envoyer ou réinitialiser un formulaire	Une action familière se répète dans une barre dense
Comportement mobile	Fournir une grande cible tactile et distinguer visuellement les actions principales et destructives.	Garder une grande cible tactile visible ou invisible et ne jamais dépendre du survol pour expliquer l’action.

Essayer Bouton Essayer Bouton icône

Dimension

BoutonButton

Bouton icôneIcon button

Déclenchement

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

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

Modalité

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

Contrôle d’action non modal ; son apparence compacte ne change pas le comportement d’un bouton.

Positionnement

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

Dans une barre d’outils ou près de l’objet concerné par son action unique.

Interactivité

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

Exécute une action et possède toujours un nom accessible ; l’infobulle reste complémentaire.

Focus

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

Toute la cible du bouton, pas seulement le glyphe, reçoit un focus visible.

Fermeture

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

Le bouton lui-même ne se ferme pas ; toute surface contrôlée suit son propre contrat.

Rôle accessible

button

Cas d’usage

Envoyer ou réinitialiser un formulaire

Une action familière se répète dans une barre dense

Comportement mobile

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

Garder une grande cible tactile visible ou invisible et ne jamais dépendre du survol pour expliquer l’action.