Boutons #

Attention : Cette page n’est pas complète. La transition de la documentation en v2 à laissé des incohérences dans cette page !

Cette section présente des boutons simples d’usages en différents styles, tailles et types.

Core Button #

Bouton de défault Bouton gras Bouton primaire Bouton alternatif Bouton secondaire Lien

<button class="btn">Bouton de défault</button>
<button class="btn btn--bold">Bouton gras</button>
<button class="btn btn--primaire">Bouton primaire</button>
<button class="btn btn--primaire--alt">Bouton primaire mediant</button>
<button class="btn btn--secondaire">Bouton secondaire</button>
<a href="some link" class="btn btn--link">Lien</a>

Couleur des boutons #

Les couleurs sont attribués via le color.less

button de succès button d’erreur

<button class="btn btn--success">button de succès</button>
<button class="btn btn--error">button d'erreur</button>

Tailles des boutons #

Trois classes maîtrisent les taillent des boutons :

• grand
• moyen
• petit

grand bouton bouton moyen petit bouton

Pour un bouton “full width”, la classe toute_taille est de mise

Bouton toute_taille

<button class="btn btn--grand">grand bouton</button>
<button class="btn">bouton moyen</button>
<button class="btn btn--petit">petit bouton</button>

<button class="btn btn--toute_taille">Bouton toute-taille</button>

Formes des boutons #

Pour des boutons de forme carrées, la classe btn-action-carre est utilisée. Pour des boutons de forme ronde, la classe btn-action-cercle est utilisée.

La suite En savoir plus Aller !

<button class="btn btn--carre"><i class="icon-smile-o"></i></button>
<button class="btn btn--cercle"><i class="icon-smile-o"></i></button>

Êtat des boutons #

Pour un bouton actif il faut ajouter la classe active ou l’attribut active

Bouton actif Bouton actif Bouton actif

<button class="btn btn--active">Bouton actif</button>
<button class="btn btn--primaire btn--active">Bouton actif</button>
<button class="btn btn--primaire--alt btn--active">Bouton actif</button>

Pour un bouton désactivé il faut ajouter la classe desactive ou l’attribut disabled

Bouton désactivé Bouton désactivé Bouton désactivé

<button class="btn btn--desactive" tabindex="-1">Bouton désactivé</button>
<button class="btn" disabled tabindex="-1">Bouton désactivé</button>

Pour un état de chargement pour les boutons, il faut ajouter la classe tournoiement.

button button button

<button class="btn btn--tournoiement">button</button>

Groupe de bouton #

Pour forger un ensemble de bouton groupé, il faut ajouter la classe btn_assemblee au parent contenant. Pour un groupe full width, il faut rajouter la classe btn_assemblee--toute-taille.

<div class="btn_assemblee btn_assemblee--toute_taille">
  <button class="btn">Premier bouton</button>
  <button class="btn">Second bouton</button>
  <button class="btn">Troisième bouton</button>
</div>