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.
À faire
À éviter
À faire
À éviter
Anatomie
Par défaut
1. Activé : état par défaut.
2. Pointez
3. Appuyer
Grande
1. Activé : état par défaut.
2. Pointez
3. Appuyer
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.
Par défaut
| Propriétés | Personnalisation | Valeurs par défaut |
|---|---|---|
| Forme | Oui | Grand, Cercle |
| Marges intérieures | Oui | 16 dp, 8 dp |
| Bordure | Oui | 2 dp, #606460 |
| Texte | Oui | Body Small |
| Icône de début | Oui | 40 dp |
| Icône de fin | Oui | 40 dp |
| Taille | Oui | Hauteur minimale de 56 dp |
| Profondeur | Oui | 0 |
Grande
| Propriétés | Personnalisation | Valeurs par défaut |
|---|---|---|
| Forme | Oui | Grand, Cercle |
| Marges intérieures | Oui | 20 dp, 8 dp |
| Bordure | Oui | 2 dp, #606460 |
| Texte | Oui | Body Small |
| Icône de début | Oui | 56 dp |
| Icône de fin | Oui | 56 dp |
| Taille | Oui | Hauteur minimale de 72 dp |
| Profondeur | Oui | 0 |
| Surface | Non |