Usage

Les boutons peuvent être formés à partir des élements <a>, <button>, ou <input>.

Link 
<a class="btn btn-default" href="" role="button">...</a>
<button class="btn btn-default" type="submit">...</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Les boutons CNAM UI

La charte graphique CNAM utilise les boutons suivants.

<button type="button" class="btn btn-primary">...</button>
<button type="button" class="btn btn-default">...</button>
<button type="button" class="btn btn-link">...</button>

Tailles de boutons

Il est possible de varier la taille des boutons grace aux classes .btn-lg, .btn-sm.

<p>
  <button type="button" class="btn btn-primary btn-lg">...</button>
  <button type="button" class="btn btn-default btn-lg">...</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">...</button>
  <button type="button" class="btn btn-default btn-sm">...</button>
</p>

Boutons block

Utiliser le style .btn-block pour créer un bouton qui occupe toute la largeur de son parent.

<button type="button" class="btn btn-primary btn-lg btn-block">...</button>
<button type="button" class="btn btn-default btn-lg btn-block">...</button>

Etats des boutons

Les états des boutons sont gérés par les pseudoclass, cependant des classes spécifiques permettent également de simuler visuellement l'état d'un bouton.

<button type="button" class="btn btn-primary active">...</button>
<button type="button" class="btn btn-default active">...</button>

Les boutons comme les éléments de formulaires peuvent être désactivés en leur ajoutant l'attribut disabled.

<button type="button" class="btn btn-default" disabled>...</button>
<input  type="button" class="btn btn-default"  value="..." disabled >

Les ancres doivent recevoir la classe .disabled ainsi que les attributs aria-disabled="true" et tabindex="-1" pour simuler cet état.

Lien bouton primaire Lien bouton par défaut 
<a tabindex="-1" class="btn btn-primary disabled" role="button" aria-disabled="true">...</a>
<a tabindex="-1" class="btn btn-default disabled" role="button" aria-disabled="true">...</a>

État toggle

L'attribut data-toggle="button" permet de transformer un bouton poussoir (ou bouton toggle) pour afficher alternativement sont état actif. Le plugin Bootstrap Button.js ajoute ou retire le style .active et l'attribut aria-pressed="true".

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">...</button>
<button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false">...</button>

Bouton case à cocher et radio

La classe .btn peut être appliquer sur des éléments label pour personnaliser les styles de cases à cocher et boutons radio. Il suffit d'ajouter l'attribut data-toggle="buttons" sur un groupe de bouton pour créer une barre de boutons radio personnalisée. Por pré-cocher une case au chargement il faut lui appliquer le style .active manuellement.

<label class="btn btn-default active">
  <input type="checkbox" checked> Case checked
</label>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-default">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-default">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>      
</div>

Groupe de boutons

Les boutons peuvent être regroupés pour créer des barre d'outils. Pour une meilleur accessiblité il est conseillé de déclarer le role du groupe par un attribut role="group" ou role="toolbar" et de lui donner un libellé par l'attribut aria-label ou aria-labelled-by

<div class="btn-group" role="group" aria-label="Groupe de boutons d'action">
  <button type="button" class="btn btn-default">Bouton de gauche</button>
  <button type="button" class="btn btn-default">Bouton du milieu</button>
  <button type="button" class="btn btn-default">Bouton de droite</button>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="Barre d'outils">
  <div class="btn-group mr-2" role="group" aria-label="Premier groupe">
    <button type="button" class="btn btn-default">1</button>
    <button type="button" class="btn btn-default">2</button>
    <button type="button" class="btn btn-default">3</button>
    <button type="button" class="btn btn-default">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Deuxième groupe">
    <button type="button" class="btn btn-default">5</button>
    <button type="button" class="btn btn-default">6</button>
    <button type="button" class="btn btn-default">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Troisième groupe">
    <button type="button" class="btn btn-default">8</button>
  </div>
</div>  
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="Barres de boutons avec un menu imbriqué">
    <button type="button" class="btn btn-default">1</button>
    <button type="button" class="btn btn-default">2</button>
  
    <div class="btn-group" role="group">
      <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Menu déroulant
      </button>
      <ul class="dropdown-menu" role="menu" aria-label="menu déroulant">
        <li role="presentation"><a class="dropdown-item" role="menu-item" href="#">Action</a></li>
        <li role="presentation"><a class="dropdown-item" role="menu-item" href="#">Autre action</a></li>
        <li role="presentation"><a class="dropdown-item" role="menu-item" href="#">Encore une autre action</a></li>
        <li class="dropdown-divider"></li>
        <li role="presentation"><a class="dropdown-item" role="menu-item" href="#">Lien séparé</a></li>
      </ul>        
    </div>
  </div>
... 
<div class="btn-group-vertical">
  ...
</div>

Variantes de boutons

Tous les styles de boutons Bootstrap sont présents dans le Bootstrap CNAM mais, à l'exception de .btn-primary, ils ne sont pas utililisés dans la charte CNAM.