Bouton
Le bouton est l’élément interactif par excellence : il déclenche une action (soumission, ouverture d’une fenêtre, confirmation, etc.). Il doit rester lisible, reconnaissable et cohérent avec le ton institutionnel du design système.
Exemples
<div style="display: flex; flex-wrap: wrap; gap: var(--bj-spacing-3v);">
<button class="bj-btn">Libellé</button>
<button class="bj-btn bj-btn--secondary">Libellé</button>
<button class="bj-btn bj-btn--tertiary">Libellé</button>
<button class="bj-btn bj-btn--accent">Libellé</button>
<button class="bj-btn bj-btn--contrast">Libellé</button>
</div>Tailles
<button class="bj-btn bj-btn--sm">Petit</button>
<button class="bj-btn">Par défaut</button>
<button class="bj-btn bj-btn--lg">Grand</button>
<button class="bj-btn bj-btn--full">Pleine largeur</button>Variantes × tailles
<!-- Primaire -->
<button class="bj-btn bj-btn--sm">Primaire sm</button>
<button class="bj-btn">Primaire md</button>
<button class="bj-btn bj-btn--lg">Primaire lg</button>
<!-- Secondaire -->
<button class="bj-btn bj-btn--secondary bj-btn--sm">Secondaire sm</button>
<button class="bj-btn bj-btn--secondary">Secondaire md</button>
<button class="bj-btn bj-btn--secondary bj-btn--lg">Secondaire lg</button>
<!-- Tertiaire -->
<button class="bj-btn bj-btn--tertiary bj-btn--sm">Tertiaire sm</button>
<button class="bj-btn bj-btn--tertiary">Tertiaire md</button>
<button class="bj-btn bj-btn--tertiary bj-btn--lg">Tertiaire lg</button>
<!-- Accent -->
<button class="bj-btn bj-btn--accent bj-btn--sm">Accent sm</button>
<button class="bj-btn bj-btn--accent">Accent md</button>
<button class="bj-btn bj-btn--accent bj-btn--lg">Accent lg</button>
<!-- Contraste -->
<button class="bj-btn bj-btn--contrast bj-btn--sm">Contraste sm</button>
<button class="bj-btn bj-btn--contrast">Contraste md</button>
<button class="bj-btn bj-btn--contrast bj-btn--lg">Contraste lg</button>Boutons avec icône
<button class="bj-btn"><i class="ri-download-line"></i> Télécharger</button>
<button class="bj-btn">Suivant <i class="ri-arrow-right-line"></i></button>
<button class="bj-btn bj-btn--icon" aria-label="Rechercher"><i class="ri-search-line"></i></button>Boutons icône par variante
<button class="bj-btn bj-btn--icon bj-btn--sm" aria-label="Primary sm"><i class="ri-search-line"></i></button>
<button class="bj-btn bj-btn--icon" aria-label="Primary md"><i class="ri-search-line"></i></button>
<button class="bj-btn bj-btn--icon bj-btn--lg" aria-label="Primary lg"><i class="ri-search-line"></i></button>
<button class="bj-btn bj-btn--secondary bj-btn--icon bj-btn--sm" aria-label="Secondary sm"><i class="ri-search-line"></i></button>
<button class="bj-btn bj-btn--secondary bj-btn--icon" aria-label="Secondary md"><i class="ri-search-line"></i></button>
<button class="bj-btn bj-btn--secondary bj-btn--icon bj-btn--lg" aria-label="Secondary lg"><i class="ri-search-line"></i></button>
<button class="bj-btn bj-btn--tertiary bj-btn--icon bj-btn--sm" aria-label="Tertiary sm"><i class="ri-search-line"></i></button>
<button class="bj-btn bj-btn--tertiary bj-btn--icon" aria-label="Tertiary md"><i class="ri-search-line"></i></button>
<button class="bj-btn bj-btn--tertiary bj-btn--icon bj-btn--lg" aria-label="Tertiary lg"><i class="ri-search-line"></i></button>
<button class="bj-btn bj-btn--accent bj-btn--icon bj-btn--sm" aria-label="Accent sm"><i class="ri-search-line"></i></button>
<button class="bj-btn bj-btn--accent bj-btn--icon" aria-label="Accent md"><i class="ri-search-line"></i></button>
<button class="bj-btn bj-btn--accent bj-btn--icon bj-btn--lg" aria-label="Accent lg"><i class="ri-search-line"></i></button>
<button class="bj-btn bj-btn--contrast bj-btn--icon bj-btn--sm" aria-label="Contrast sm"><i class="ri-search-line"></i></button>
<button class="bj-btn bj-btn--contrast bj-btn--icon" aria-label="Contrast md"><i class="ri-search-line"></i></button>
<button class="bj-btn bj-btn--contrast bj-btn--icon bj-btn--lg" aria-label="Contrast lg"><i class="ri-search-line"></i></button>Groupe de boutons
<div class="bj-btn-group">
<button class="bj-btn">Principal</button>
<button class="bj-btn bj-btn--secondary">Secondaire</button>
<button class="bj-btn bj-btn--tertiary">Annuler</button>
</div>Groupe vertical
<div class="bj-btn-group bj-btn-group--vertical">
<button class="bj-btn">Premier</button>
<button class="bj-btn bj-btn--secondary">Deuxième</button>
<button class="bj-btn bj-btn--tertiary">Troisième</button>
</div>Groupe compact
<div class="bj-btn-group bj-btn-group--inline-sm">
<button class="bj-btn bj-btn--sm">A</button>
<button class="bj-btn bj-btn--secondary bj-btn--sm">B</button>
<button class="bj-btn bj-btn--tertiary bj-btn--sm">C</button>
</div>Chargement
<button class="bj-btn bj-btn--loading" aria-busy="true">Chargement</button>
<button class="bj-btn bj-btn--secondary bj-btn--loading" aria-busy="true">Chargement</button>
<button class="bj-btn bj-btn--tertiary bj-btn--loading" aria-busy="true">Chargement</button>
<button class="bj-btn bj-btn--accent bj-btn--loading" aria-busy="true">Chargement</button>
<button class="bj-btn bj-btn--contrast bj-btn--loading" aria-busy="true">Chargement</button>
<button class="bj-btn bj-btn--sm bj-btn--loading" aria-busy="true">Petit</button>
<button class="bj-btn bj-btn--lg bj-btn--loading" aria-busy="true">Grand</button>États
Normal et survol - les effets au survol et à l’activation s’affichent sur les boutons actifs ci-dessous.
Désactivé
Lien stylé en bouton
Lien bouton<button class="bj-btn">Normal</button>
<button class="bj-btn" disabled>Désactivé</button>
<a class="bj-btn" href="#">Lien bouton</a>Désactivé par variante
<button class="bj-btn" disabled>Primaire</button>
<button class="bj-btn bj-btn--secondary" disabled>Secondaire</button>
<button class="bj-btn bj-btn--tertiary" disabled>Tertiaire</button>
<button class="bj-btn bj-btn--accent" disabled>Accent</button>
<button class="bj-btn bj-btn--contrast" disabled>Contraste</button>
<a class="bj-btn bj-btn--disabled" href="#" aria-disabled="true">Lien désactivé</a>Pleine largeur par variante
<button class="bj-btn bj-btn--full">Primaire pleine largeur</button>
<button class="bj-btn bj-btn--secondary bj-btn--full">Secondaire pleine largeur</button>
<button class="bj-btn bj-btn--tertiary bj-btn--full">Tertiaire pleine largeur</button>
<button class="bj-btn bj-btn--accent bj-btn--full">Accent pleine largeur</button>
<button class="bj-btn bj-btn--contrast bj-btn--full">Contraste pleine largeur</button>Classes CSS
| Classe | Description |
|---|---|
bj-btn | Base du bouton ; variante primaire (vert institutionnel). |
bj-btn--secondary | Fond transparent, bordure et texte d’action. |
bj-btn--tertiary | Texte seul, fond discret au survol. |
bj-btn--accent | Fond rouge Bénin pour une mise en avant ponctuelle. |
bj-btn--contrast | Fond sombre et texte clair (contextes contrastés). |
bj-btn--sm | Petite taille (padding et corps réduits). |
bj-btn--lg | Grande taille. |
bj-btn--icon | Bouton carré pour une icône seule ; combinable avec bj-btn--sm ou bj-btn--lg pour ajuster le padding. |
bj-btn--full | Largeur 100 % du conteneur parent. |
bj-btn--disabled | Apparence désactivée sur un élément non button ; utiliser avec aria-disabled="true" et gérer l’interaction en JavaScript si besoin. |
bj-btn--loading | État de chargement : désactive le bouton et affiche un spinner animé à la place du texte. |
bj-btn-group | Conteneur flex en ligne avec espacement entre boutons. |
bj-btn-group--vertical | Empile les boutons du groupe en colonne. |
bj-btn-group--inline-sm | Groupe avec un espacement réduit entre les boutons. |
Accessibilité
Utilisez un vrai
<button> pour les actions dans la page (ouvrir une modale, soumettre un formulaire avec type="submit", etc.) et un lien <a> avec href valide pour la navigation vers une autre URL. Pour désactiver un bouton natif, préférez l’attribut disabled : il retire l’élément de l’ordre de tabulation et annonce l’état aux technologies d’assistance. Les boutons icône seuls doivent exposer un nom accessible, en général via aria-label (et aria-hidden="true" sur l’icône décorative).