Boutons

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

Principes

Axés sur l'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, pression, sélection) pour fournir un commentaire immédiat.

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

Flexibles : 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 pertinent. Il peut être placé seul ou avec d'autres composants, comme des fiches et des listes.

check_circle

À faire

Utilisez la divulgation progressive pour afficher les actions moins pertinentes.

cancel

À éviter

Ne surchargez pas la vue de l'utilisateur avec trop de boutons. Utilisez plutôt un groupe de boutons.

check_circle

À faire

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

cancel

À éviter

N'utilisez pas de bouton comme élément décoratif statique.

Boutons d'icône

Les boutons d'icône sont disponibles pour réduire la densité du contenu. Utilisez des boutons d'icône lorsque l'icône illustre clairement une action. Sinon, incluez un libellé de bouton.

check_circle

À faire

Utilisez un bouton d'icône pour les actions courantes et très reconnaissables.

cancel

À éviter

N'utilisez pas de bouton d'icône pour les actions très obscures.

Boutons bascule

Pour les actions avec des états booléens, comme "Ajouter aux favoris", une variante de bouton bascule est disponible pour chaque type de bouton. L'échange d'icônes entre les états de bascule rend l'interaction plus rapide et réactive.

check_circle

À faire

Utilisez un bouton bascule si des options booléennes sont disponibles pour une action. Par exemple, "Démarrer/Arrêter".

cancel

À éviter

N'utilisez pas de bouton bascule pour les actions non binaires.

Anatomie

Les boutons sont composés d'un libellé et d'une icône facultative en début ou en fin de libellé.

Les boutons d'icône ne sont composés que d'une icône reconnaissable.

Les deux ont une variante de bouton bascule.

Personnalisation

Les boutons ont un style par défaut et un style grand. La grande taille peut aider à souligner l'importance.

Les icônes peuvent être utilisées pour mettre davantage l'accent sur le bouton, le clarifier et le rendre plus reconnaissable en début ou en fin de libellé.