Boutons

Les boutons sont le principal indicateur visuel des actions d'un utilisateur.

Principes

Orientés action : les boutons doivent indiquer clairement qu'ils déclenchent une action.

Commentaires clairs : l'apparence du bouton doit changer de manière distincte selon les différents états d'interaction (survol, appui, sélection) pour fournir un retour immédiat.

Cohérence : tous les boutons doivent partager un langage visuel de base pour être immédiatement reconnaissables.

Flexible : le composant de bouton doit s'adapter aux variations courantes, comme l'inclusion d'icônes et de différentes tailles, sans sacrifier la cohérence.

Utilisation et emplacement

Un bouton doit être placé à proximité du contenu auquel il se rapporte. Ils peuvent être placés seuls ou avec d'autres composants, comme des cartes et des listes.

check_circle

À faire

Utilisez la divulgation progressive pour afficher les actions moins pertinentes.

cancel

À éviter

Saturer la vue de l'utilisateur avec trop de boutons.

check_circle

À faire

Utilisez des boutons pour inciter à une action. Vous pouvez également utiliser un chip de titre pour un élément statique.

cancel

À éviter

utiliser un bouton comme élément décoratif statique.

Anatomie

Personnalisation

Les boutons contiennent une variante par défaut et une variante grande, ainsi que des états par défaut, avec focus et appuyé pour chacune d'elles. Les icônes peuvent être utilisées pour mettre davantage en évidence le bouton, le clarifier et le rendre plus reconnaissable. La taille des boutons peut aider à souligner l'importance.