Composants
Boutons
L'élément button représente un bouton cliquable, que l'on utilise soit pour soumettre des formulaires, soit pour n'importe quelle autre fonctionnalité d'action.
Type de boutons
Bouton primaire
Le bouton principal sert à mettre en avant l'action principale de l'écran. Il ne doit y avoir qu'un seul bouton principal par écran.
La version classique "colorée" du bouton primaire est obtenue via la classe btn--plain.
Les différents états du bouton primaire :
Variante du bouton primaire
Vous pouvez choisir de rendre les boutons primaires contourés plutôt que pleins, pour des actions qui font partie du parcours utilisateur. Il s'agit d'une variante du bouton primaire. La version principale ci-dessus est néanmoins à privilégier.
Pour utiliser cette variante, utilisez la classe btn--ghost.
Les différents états de la variante du bouton primaire :
Bouton secondaire
Le bouton secondaire est utilisé pour les actions secondaires. Il est possible d'avoir plusieurs boutons secondaires par écran.
Les différents états du bouton secondaire :
Boutons désactivés
L'état disabled empêche le bouton d'être cliqué ou focusé, ce qui permet d'empêcher l'action correspondante pour l'utilisateur.
Boutons avec pictogrammes
Les boutons de pictogrammes fournissent à l'utilisateur une iconographie visuelle pour indiquer ce que fait le bouton (gardez la même couleur entre votre pictogramme et votre label).
Veuillez noter de ne pas utiliser deux pictogrammes dans le même bouton.
Accessibilité : Si un bouton contient uniquement un pictogramme, il faut lui ajouter un aria-label ou un <span class="sr-only"> précisant son action.
Groupe de boutons
Si vous souhaitez apposer plusieurs boutons au même endroit, entourez-les d'un élément portant la classe .btn-group.
Bouton petite taille
Réduit la taille du bouton via la classe btn-xs. Cette classe se combine avec les autres classes de bouton.
Utilisation
Les boutons sont destinés à soumettre des formulaires ou à actionner des interactions JS. En revanche, ils ne doivent pas se substituer aux liens, qui ont pour rôle de renvoyer vers une autre page web (ou à une autre zone de la page en cours.