Anatomie
Le composant bouton est composé de plusieurs éléments dont certains ne sont visibles qu'en fonction des options de personnalisation choisies.
- Conteneur
- Icône de début facultatif
- Label
- Icône de fin facultatif
- Deuxième icône de fin facultatif
- Badge facultatif
Variantes
Six variantes sont disponibles : bouton primaire (primary), bouton secondaire (secondary), bouton tertiaire (tertiary), bouton neutre (neutral), bouton navigation (navigation), bouton danger (danger).
Chacune de ces variantes se décline sur cinq états : défaut (default), survol (hover), actif (active), désactivé (disabled), chargement (loading) ; et change en fonction du fond sur lequel le bouton est utilisé : sur fond neutre (base ou layer), sur menu flottant (floating menu), sur fond contrasté neutre (constrasted neutral).
Les boutons de chargement peuvent afficher l'état de chargement et désactiver les interactions disponibles sur la page.
Bouton primaire - Primary
Ces boutons sont utilisés pour des actions importantes que les utilisateurs ne doivent pas manquer.
Le bouton principal doit être le plus visible sur une page. Il doit y avoir au maximum un bouton principal par écran pour maintenir une hiérarchie claire basée sur les actions (en dehors des boîtes de dialogue et autres superpositions). Il n'est pas toujours nécessaire d'utiliser un bouton principal sur chaque écran.
Accompagné, le bouton d'action principal sera généralement placé à droite d'un bouton secondaire, mais cela peut dépendre de la situation.
Bouton secondaire - Secondary
Ceux-ci sont utilisés pour des actions basiques : ni trop visibles, ni trop discrètes.
Ils sont à utiliser pour des actions neutres. Il n'y a pas de limite au nombre de boutons secondaires que l'on peut utiliser. Un bouton secondaire est plus facile à identifier lorsqu'il est placé à côté d'un bouton principal que lorsqu'il est placé séparément.
Bouton tertiaire - Tertiary
Le bouton tertiaire est utilisé pour les actions qui doivent être disponibles, mais non annoncées.
Ils sont à utiliser pour les actions qui n'ont pas besoin d'être très visibles. Il peut s'agir d'actions que les utilisateurs n'ont pas besoin d'effectuer très souvent. Dans la plupart des cas, il est utilisé pour des actions de restauration, telles que "Annuler" et "Retour".
Bouton neutre - Neutral
Les boutons neutres sont utilisés principalement pour indiquer un contenu précis attendu à compléter. Ils ouvrent une modale pour sélectionner l'information attendue.
On peut les retrouver dans un tableau pour, par exemple, sélectionner une personne dans une liste, afin de l'assigner à la tâche.
Bouton navigation - Navigation
Ces boutons sont utilisés pour les actions de navigation dans le menu principal du produit.
Bouton danger - Danger
Les boutons de danger sont à utiliser pour les actions qui pourraient avoir un effet destructeur sur les données de l'utilisateur, comme par exemple, supprimer un contact, des données. Il peut être utile d'utiliser une modale de confirmation avant d'effectuer.
Tailles
Les boutons sont disponibles en trois tailles. La taille moyenne est à privilégier pour plus de confort visuel.
Responsive
Le bouton s'agrandit généralement pour s'adapter à la taille du texte.
Si le bouton possède une taille fixe, comme par exemple sur un petit écran, le texte sera tronqué pour garder le bouton sur une seule ligne.
La taille minium d'un bouton sur mobile est de 48 pixels en hauteur et 48 pixels en largeur. Cette taille permet une interaction tactile facile et précise, même pour les utilisateurs ayant des doigts plus grands ou des difficultés motrices.