Skip to main content

# Boutons

# 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.

Case checked
Active Radio Radio

    <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.