Bouton vs Bouton icône

Le Bouton affiche un libellé textuel visible ; le Bouton icône exécute le même type d’action mais remplace le libellé visible par une icône et un nom accessible.

Essayer Bouton Essayer Bouton icône

Critères de choix, liens et sources

BoutonChoisis Bouton si l’action est principale ou peu familière et qu’un libellé visible évite un malentendu.Ouvrir la fiche Bouton
Bouton icôneChoisis Bouton icône si une action familière se répète dans une barre dense et que l’espace compte plus qu’un libellé visible.Ouvrir la fiche Bouton icône

Voir les neuf dimensions Voir les sources

Bouton

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.

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.

Utiliser le Pack — Bouton

Lequel convient à ton besoin ?

Bouton

Envoyer ou réinitialiser un formulaire

Bouton icône

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

Quel composant utilises-tu ici ?Utiliser BoutonUtiliser Bouton icône

Lire le Pack complet Vérifier le résultat

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 sources

Parties 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.
Bouton icône
Exécute une action et possède toujours un nom accessible ; l’infobulle reste complémentaire.
Déclenchement: Bouton
Clic, toucher, Entrée ou Espace sur le contrôle nommé.
Bouton icône
Clic, toucher, Entrée ou Espace sur le contrôle iconographique.
Rôle accessible: Bouton
button
Bouton icône
button

Neuf dimensions

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

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.

Déclencher ou naviguer

Bouton

Bouton icône

Ce que cet essai montre

Lequel convient à ton besoin ?

Bouton

Bouton icône

Parties du spécimen

Question de famille

Trois critères pour choisir

Neuf dimensions