Les boutons icônes servent à rendre disponible une action sur une icône simple. Ne possédant pas de texte, l'utilisation du bouton peut être spécifiée à l'aide d'une infobulle.
Ils doivent être utilisés avec précaution et uniquement lorsqu'une icône suffit à la place d'un bouton avec du texte.
✅ Usage correct :
- Pour des actions simples qui peuvent être représentées par une icône, comme un "+" pour Ajouter.
- Pour des raccourcis vers des pages, comme par exemple dans l'entête d'un site, une cloche pour signifier l'historique de notifications.
🚫 Usage incorrect :
Les boutons icônes ne doivent pas être utilisés pour mettre en avant une icône si aucune action n'y est associée.
Comportement général
Tout comme le bouton, le bouton icône est un élément interactif. Il est utilisé pour permettre aux utilisateurs d'effectuer des actions spécifiques sur une page web. Les différents comportements d'un bouton sont les suivants :
Affichage
Les boutons d'action indiquent clairement quelle action sera effectuée lorsque le bouton est cliqué à l'aide de l'icône qui doit être représentative ainsi qu'à l'infobulle associée.
Au clic
Lorsqu'un utilisateur clique sur le bouton avec la souris ou appuie dessus avec le doigt (dans le cas des appareils tactiles), un événement de clic est déclenché.
Feedback visuel
Pour donner un retour immédiat à l'utilisateur, le bouton peut changer d'apparence lorsque l'on passe la souris dessus (effet de survol) ou lorsque l'on clique dessus (effet d'enfoncement). Cela indique que l'action est bien prise en compte.
Action associée
Chaque bouton est lié à une action spécifique sur la page web. Cela peut être quelque chose de simple, comme supprimer une ligne d'un tableau ou bien éditer une carte.
État désactivé
Dans certains cas, le bouton peut être désactivé, ce qui signifie qu'il est non cliquable. Cela peut se produire lorsque les conditions requises pour l'action ne sont pas remplies, par exemple, si un formulaire n'est pas correctement rempli.