Composants

Boutons

Les boutons déclenchent une action : valider un virement, envoyer une demande, ouvrir une fenêtre. Cauri propose des variantes pleines, contour et lien, trois tailles et des états actif, désactivé et de chargement.

Variantes pleines#

Le bouton principal est bleu. btn-secondary et btn-success ont la même teinte verte dans Cauri : le choix tient au sens (validation ou action secondaire), pas à la couleur. btn-link donne l’apparence d’un lien tout en gardant le comportement d’un bouton.

<button type="button" class="btn btn-primary">Principal</button>
<button type="button" class="btn btn-secondary">Secondaire</button>
<button type="button" class="btn btn-success">Succès</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Avertissement</button>
<button type="button" class="btn btn-info">Information</button>
<button type="button" class="btn btn-light">Clair</button>
<button type="button" class="btn btn-dark">Sombre</button>
<button type="button" class="btn btn-link">Lien</button>

Variantes contour#

Remplacez btn-* par btn-outline-* pour obtenir un contour et un fond transparent. btn-outline-light s’utilise sur un fond foncé.

<button type="button" class="btn btn-outline-primary">Principal</button>
<button type="button" class="btn btn-outline-secondary">Secondaire</button>
<button type="button" class="btn btn-outline-success">Succès</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-info">Information</button>
<button type="button" class="btn btn-outline-dark">Sombre</button>
<span class="d-inline-block bg-dark p-2 rounded"><button type="button" class="btn btn-outline-light">Clair</button></span>

Éléments compatibles#

La classe btn fonctionne sur button, a et input. Pour un lien qui joue le rôle d’un bouton, ajoutez role="button".

Lien

<a class="btn btn-primary" href="#" role="button">Lien</a>
<button class="btn btn-primary" type="submit">Bouton</button>
<input class="btn btn-primary" type="button" value="Saisie">
<input class="btn btn-primary" type="submit" value="Envoyer">
<input class="btn btn-primary" type="reset" value="Réinitialiser">

Tailles#

Ajoutez btn-lg ou btn-sm. Pour une taille sur mesure, redéfinissez --bs-btn-padding-y, --bs-btn-padding-x et --bs-btn-font-size.

<button type="button" class="btn btn-primary btn-lg">Grand</button>
<button type="button" class="btn btn-primary">Standard</button>
<button type="button" class="btn btn-primary btn-sm">Petit</button>
<button type="button" class="btn btn-primary" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">Sur mesure</button>

États désactivé et actif#

Sur un button, utilisez l’attribut disabled. Sur un lien, la classe disabled ne bloque que le clic à la souris : ajoutez aria-disabled="true" et tabindex="-1". La classe active reproduit l’apparence enfoncée ; elle est déjà appliquée aux boutons à bascule (voir plus bas).

Lien désactivé Lien actif

<button type="button" class="btn btn-primary" disabled>Désactivé</button>
<button type="button" class="btn btn-outline-primary" disabled>Désactivé</button>
<a class="btn btn-primary disabled" role="button" aria-disabled="true" tabindex="-1" href="#">Lien désactivé</a>
<button type="button" class="btn btn-primary active" aria-pressed="true">Actif</button>
<a href="#" class="btn btn-outline-primary active" role="button" aria-pressed="true">Lien actif</a>

Bouton en chargement#

Combinez disabled et un indicateur de chargement pendant l’envoi. Le texte masqué du spinner est annoncé par role="status".

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
  <span role="status">Envoi du virement…</span>
</button>
<button class="btn btn-outline-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
  <span role="status">Chargement…</span>
</button>

Boutons pleine largeur#

Placez les boutons dans un conteneur d-grid pour les étendre sur toute la largeur. Ajoutez d-md-block pour revenir à la largeur naturelle à partir du point de rupture md.

<div class="d-grid gap-2 mb-3">
  <button class="btn btn-primary" type="button">Valider le virement</button>
  <button class="btn btn-outline-primary" type="button">Annuler</button>
</div>
<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Continuer</button>
  <button class="btn btn-outline-primary" type="button">Retour</button>
</div>

Bouton à bascule#

Avec data-bs-toggle="button", le bouton alterne entre les états actif et inactif à chaque clic, et met à jour aria-pressed. Cette bascule demande le JavaScript de Cauri. Pour une bascule dans un formulaire, préférez les cases à cocher stylées en bouton, décrites dans Groupes de boutons.

<button type="button" class="btn btn-outline-primary" data-bs-toggle="button" aria-pressed="false" autocomplete="off">Recevoir les alertes par SMS</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true" autocomplete="off">Relevé mensuel activé</button>
<button type="button" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false" autocomplete="off" disabled>Indisponible</button>

Classes

Classes
Classe	Rôle
`btn`	Base commune : espacement, bordure, arrondi, graisse 600, transitions et états.
`btn-primary` (bleu), `btn-secondary` et `btn-success` (vert), `btn-danger`, `btn-warning`, `btn-info`, `btn-light`, `btn-dark`	Variantes pleines.
`btn-outline-*`	Mêmes couleurs en contour, pour les actions secondaires.
`btn-link`	Aspect d’un lien (soulignement au survol).
`btn-lg`, `btn-sm`	Taille grande ou petite.
`active`	Apparence enfoncée.
`disabled`	Apparence désactivée (opacité .65) et clics ignorés ; sur un `button`, préférez l’attribut `disabled`.
`btn-check`	Case ou radio masquée associée à un `label.btn` (voir Groupes de boutons).

Méthodes JavaScript

Seul le bouton à bascule (data-bs-toggle="button") a un comportement JavaScript. Il n’a ni option ni événement.

Méthodes JavaScript
Méthode	Description
`toggle()`	Alterne la classe `active` et met à jour `aria-pressed`.
`dispose()`	Détruit l’instance.
`getInstance(element)`	Méthode statique : renvoie l’instance associée, ou `null`.
`getOrCreateInstance(element)`	Méthode statique : renvoie l’instance existante ou en crée une.

Variables Sass

Les couleurs des variantes viennent de la map $theme-colors (primaire bleu #2B62AA, secondaire et succès vert #387A1B).

Variables Sass
Variable	Défaut	Rôle
`$btn-padding-y`	`.625rem`	Espacement vertical (valeur du thème BDU).
`$btn-padding-x`	`1.5rem`	Espacement horizontal (valeur du thème BDU).
`$btn-font-size`	`1rem`	Taille du texte.
`$btn-font-weight`	`600`	Graisse du texte (valeur du thème BDU).
`$btn-line-height`	`1.5`	Hauteur de ligne.
`$btn-padding-y-sm`, `$btn-padding-x-sm`, `$btn-font-size-sm`	`.4375rem`, `1rem`, `.875rem`	Dimensions de `btn-sm`.
`$btn-padding-y-lg`, `$btn-padding-x-lg`, `$btn-font-size-lg`	`.8125rem`, `2rem`, `1.25rem`	Dimensions de `btn-lg`.
`$btn-border-width`	`var(--bs-border-width)`	Épaisseur de la bordure.
`$btn-border-radius`, `-sm`, `-lg`	`var(--bs-border-radius)`, `-sm`, `-lg`	Arrondis (5 px, 5 px, 10 px dans Cauri).
`$btn-disabled-opacity`	`.65`	Opacité à l’état désactivé.
`$btn-box-shadow`	`inset 0 1px 0 rgba(#fff, .15), 0 1px 1px rgba(#000, .075)`	Ombre au repos (appliquée seulement si `$enable-shadows` est vrai ; faux par défaut).
`$btn-active-box-shadow`	`inset 0 3px 5px rgba(#000, .125)`	Ombre de l’état actif.
`$btn-focus-width`	`.25rem`	Épaisseur de l’anneau de focus.
`$btn-transition`	`color, background-color, border-color, box-shadow .15s ease-in-out`	Transition entre états.
`$btn-hover-bg-shade-amount`	`15%`	Assombrissement du fond au survol (`$btn-active-bg-shade-amount` : 20 %).

Personnalisation#

Pour une variante supplémentaire, ajoutez une couleur à $theme-colors. Pour un seul bouton, redéfinissez ses propriétés CSS --bs-btn-* sur une classe à vous.

// Global : avant l'import de Cauri
$btn-font-weight: 700;
$btn-padding-x: 1.25rem;

// Local : une variante d'agence
.btn-agence {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0856A1;
  --bs-btn-border-color: #0856A1;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #064a8c;
  --bs-btn-hover-border-color: #064a8c;
  --bs-btn-active-bg: #053d73;
  --bs-btn-active-border-color: #053d73;
  --bs-btn-focus-shadow-rgb: 8, 86, 161;
  --bs-btn-disabled-bg: #0856A1;
  --bs-btn-disabled-border-color: #0856A1;
}

Bonnes pratiques

À faire

Réservez un seul bouton plein (btn-primary) à l’action principale de chaque zone ; utilisez le contour pour les actions secondaires.
Écrivez des libellés qui commencent par un verbe : « Valider le virement », « Télécharger le relevé ».
Choisissez l’élément selon le rôle : button pour une action, a pour une navigation.
Indiquez un état de chargement quand l’action prend du temps, et désactivez le bouton pour éviter un double envoi.

À éviter

Ne placez pas plusieurs boutons pleins de même importance côte à côte.
N’utilisez pas btn-danger pour une action qui n’est pas destructrice.
Ne vous fiez pas à la couleur seule : btn-secondary et btn-success sont identiques, leur libellé doit porter le sens.
N’employez pas disabled sans expliquer pourquoi l’action est indisponible.

Accessibilité

Évitez btn-outline-warning et btn-link en jaune sur fond blanc : le contraste est d’environ 1,6:1.
Un button natif est actionnable à Entrée et Espace ; un lien joué en bouton doit porter role="button" et réagir à Espace.
Pour un lien désactivé, combinez disabled, aria-disabled="true" et tabindex="-1".
Un bouton à bascule porte aria-pressed ; ne changez pas son libellé quand l’état change.
Pendant un chargement, annoncez le statut avec role="status" et masquez le spinner avec aria-hidden="true".
Les boutons-icônes ont besoin d’un aria-label ou d’un texte masqué.