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
Boutons primaires
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 :

Boutons primaires outline
Vous pouvez choisir de rendre les boutons primaires transparents plutôt que pleins. Pour ce faire, utilisez la classe btn--ghost
.
Les différents états du bouton primaire outline :

Boutons secondaires
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 icônes
Les boutons d'icônes fournissent à l'utilisateur une iconographie visuelle pour indiquer ce que fait le bouton (gardez la même couleur entre votre icône et votre label).
Veuillez noter de ne pas utiliser deux icônes dans le même bouton.
Accessibilité : Si un bouton contient uniquement une icône, 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
.
Boutons « small »
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.