Styleguide

Bouton

Ajouté à la version :

• 0.0.1

• 0.1.0(actuelle)

---

Changelog:

• 0.1.0: Ajout du Style tertiaire, du style neutre et de l'état actif
• 0.0.1: Ajout du composant

---

Style de base

Le style de base convient pour les boutons d'action primaire.

Ajouter la classe .button aux éléments <a>, <button>, ou <input />.

<a class="button" href="#" role="button">Enregistrer</a>
<button class="button">Enregistrer</button>
<input class="button" type="submit" value="Enregistrer">

Style secondaire

Le style secondaire convient pour les boutons d'action secondaire.

Ajouter la classe de modification .button--secondary à l'élément ayant la classe .button afin de modifier son style.

<a class="button button--secondary" href="#" role="button">Quitter</a>
<button class="button button--secondary">Quitter</button>
<input class="button button--secondary" type="submit" value="Quitter">

Style tertiaire

Le style tertiaire convient pour les boutons d'action secondaire sur fond noir, rouge et bleu.

Ajouter la classe de modification .button--tertiary à l'élément ayant la classe .button afin de modifier son style.

Ajouter aussi une classe utilitaire de couleurs à l'élément parent afin de faire hériter la couleur de texte de l'utilitaire au composant.

<div class="u-bkgClr0Dark u-txtClr0Dark u-paM">
  <a class="button button--tertiary" href="#" role="button">Quitter</a>
  <button class="button button--tertiary">Quitter</button>
  <input class="button button--tertiary" type="submit" value="Quitter">
</div>

<div class="u-bkgClr1 u-txtClr1 u-paM">
  <a class="button button--tertiary" href="#" role="button">Quitter</a>
  <button class="button button--tertiary">Quitter</button>
  <input class="button button--tertiary" type="submit" value="Quitter">
</div>

<div class="u-bkgClr3 u-txtClr3 u-paM">
  <a class="button button--tertiary" href="#" role="button">Quitter</a>
  <button class="button button--tertiary">Quitter</button>
  <input class="button button--tertiary" type="submit" value="Quitter">
</div>

Style neutre

Le style neutre convient pour les boutons d'action neutre.

Ajouter la classe de modification .button--neutral à l'élément ayant la classe .button afin de modifier son style.

<a class="button button--neutral" href="#" role="button">Quitter</a>
<button class="button button--neutral">Quitter</button>
<input class="button button--neutral" type="submit" value="Quitter">

Style ghost

Le style ghost convient pour les boutons sur fond blanc.

Ajouter la classe de modification .button--ghost à l'élément ayant la classe .button afin de modifier son style.

<a class="button button--ghost" href="#" role="button">Connexion</a>
<button class="button button--ghost">Connexion</button>
<input class="button button--ghost" type="submit" value="Connexion">

Style ghostAlphaDark

Le style ghostAlphaDark convient pour les boutons sur fond rouge et bleu.

Ajouter la classe de modification .button--ghostAlphaDark à l'élément ayant la classe .button afin de modifier son style.

<div class="u-bkgClr1 u-paM">
  <a class="button button--ghostAlphaDark" href="#" role="button">Connexion</a>
  <button class="button button--ghostAlphaDark">Connexion</button>
  <input class="button button--ghostAlphaDark" type="submit" value="Connexion">
</div>

<div class="u-bkgClr3 u-paM">
  <a class="button button--ghostAlphaDark" href="#" role="button">Connexion</a>
  <button class="button button--ghostAlphaDark">Connexion</button>
  <input class="button button--ghostAlphaDark" type="submit" value="Connexion">
</div>

Style ghostAlphaLight

Le style ghostAlphaLight convient pour les boutons sur fond rouge et bleu.

Ajouter la classe de modification .button--ghostAlphaLight à l'élément ayant la classe .button afin de modifier son style.

<div class="u-bkgClr0Dark u-paM">
  <a class="button button--ghostAlphaLight" href="#" role="button">Connexion</a>
  <button class="button button--ghostAlphaLight">Connexion</button>
  <input class="button button--ghostAlphaLight" type="submit" value="Connexion">
</div>

Style ghostAlternate

Le style ghostAlternate convient pour les boutons alternattifs

Ajouter la classe de modification .button--ghostAlternate à l'élément ayant la classe .button afin de modifier son style.

<a class="button button--ghostAlternate" href="#" role="button">Connexion</a>
<button class="button button--ghostAlternate">Connexion</button>
<input class="button button--ghostAlternate" type="submit" value="Connexion">

État actif

Ajouter la classe d'état .is-active sur le composant .button afin de modifier son apparence.

<a class="button is-active" href="#" role="button">Sauvegarder</a>
<button class="button button--secondary is-active">Quitter</button>
<button class="button button--neutral is-active">Quitter</button>
<input class="button button--ghost is-active" type="submit" value="Connexion">
<input class="button button--ghostAlternate is-active" type="submit" value="Connexion">

<div class="u-bkgClr0Dark u-txtClr0Dark u-paM u-mtM">
  <button class="button button--tertiary is-active">Quitter</button>
   <a class="button button--ghostAlphaLight is-active" href="#" role="button">Connexion</a>
</div>

<div class="u-bkgClr1 u-paM">
  <a class="button button--ghostAlphaDark is-active" href="#" role="button">Connexion</a>
</div>

État désactivé

• <a> : Ajouter la classe d'état .is-disabled
• <input /> ou <button /> : Ajouter l'attribut disabled

<a class="button is-disabled" href="#" role="button">Sauvegarder</a>
<button class="button button--secondary" disabled>Quitter</button>
<button class="button button--neutral" disabled>Quitter</button>
<input class="button button--ghost" type="submit" value="Connexion" disabled>
<input class="button button--ghostAlternate" type="submit" value="Connexion" disabled>

<div class="u-bkgClr0Dark u-txtClr0Dark u-paM u-mtM">
  <button class="button button--tertiary" disabled>Quitter</button>
  <a class="button button--ghostAlphaLight is-disabled" href="#" role="button">Connexion</a>
</div>

<div class="u-bkgClr1 u-paM">
  <a class="button button--ghostAlphaDark is-disabled" href="#" role="button">Connexion</a>
</div>

<div class="u-bkgClr3 u-paM">
  <input class="button button--ghostAlphaDark" type="submit" value="Connexion" disabled>
</div>

<div class="u-bkgClr0Dark u-paM">
  <input class="button button--ghostAlphaLight" type="submit" value="Connexion" disabled>
</div>

Bouton pleine largeur

Ajouter la classe de modification .button--block à l'élément ayant la classe .button afin qu'il prenne toute la largeur de son parent.

<a class="button button--block" href="#" role="button">Sauvegarder</a>

Boutons circulaires

Ajouté à la version :

• 0.0.1

---

Changelog:

• 0.0.1: Ajout du composant

---

Ajouter la classe de modification .button--circular à l'élément ayant la classe .button afin de modifier son style.

<button class="button button--circular icon icon--add">
  <span>Ajouter</span>
</button>
<button class="button button--circular button--secondary icon icon--folder">
  <span>Mes fichiers/span>
</button>
<button class="button button--circular button--ghostAlternate icon icon--notif">
  <div class="notifNumber">88</div>
  <span>Menu</span>
</button>

Boutons grouppés

Ajouté à la version :

• 0.1.0(actuelle)

---

Changelog:

• 0.1.0: Ajout du composant

---

Boutons groupés de base

Grouper les composants .button dans un élément ayant la classe .buttonGroupped.

<div class="buttonGroupped">
  <a class="button is-active" href="#" role="button">Conception</a>
  <a class="button" href="#" role="button">Code</a>
  <a class="button" href="#" role="button">Commentaires</a>
</div>

Boutons groupés avec icônes

Ajouter un composant d'icône .icon.icon-xxx dans l'élément .button .

Il est possible d'ajouter des marges en fonction de la position de l'icône :

• .icon.icon-xxx.icon--mRight : marge à droite
• .icon.icon-xxx.icon--mleft : marge à gauche

<div class="buttonGroupped">
  <a class="button is-active" href="#" role="button">
    <span class="icon icon--clock icon--mRight"></span> Conception
  </a>
  <a class="button" href="#" role="button">
    <span class="icon icon--code icon--mRight"></span> Code
  </a>
  <a class="button" href="#" role="button">
    <span class="icon icon--comment icon--mRight"></span> Commentaires
  </a>
</div>

Boutons groupés de type alternate

Le style alternate convient pour les boutons sur fond noir, rouge et bleu.

Ajouter la classe de modification .buttonGroupped--alternate à l'élément ayant la classe .buttonGroupped afin de modifier son style.

Ajouter aussi une classe utilitaire de couleurs à l'élément ayant la classe .buttonGroupped--alternate afin de faire hériter la couleur de texte de l'utilitaire au composant.

<div class="u-bkgClr0Dark u-paS">
  <div class="buttonGroupped buttonGroupped--alternate u-txtClr0Dark">
    <a class="button is-active" href="#" role="button">Conception</a>
    <a class="button" href="#" role="button">Code</a>
    <a class="button" href="#" role="button">Commentaires</a>
  </div>
</div>

<div class="u-bkgClr1 u-paS">
  <div class="buttonGroupped buttonGroupped--alternate u-txtClr1">
    <a class="button is-active" href="#" role="button">Conception</a>
    <a class="button" href="#" role="button">Code</a>
    <a class="button" href="#" role="button">Commentaires</a>
  </div>
</div>

<div class="u-bkgClr3 u-paS">
  <div class="buttonGroupped buttonGroupped--alternate u-txtClr3">
    <a class="button is-active" href="#" role="button">Conception</a>
    <a class="button" href="#" role="button">Code</a>
    <a class="button" href="#" role="button">Commentaires</a>
  </div>
</div>

Boutons groupés pleine largeur

Ajouter la classe de modification .buttonGroupped--block à l'élément ayant la classe .buttonGroupped afin qu'il prenne toute la largeur de son parent.

<div class="buttonGroupped buttonGroupped--block">
  <a class="button is-active" href="#" role="button">Conception</a>
  <a class="button" href="#" role="button">Code</a>
  <a class="button" href="#" role="button">Commentaires</a>
</div>

Bouton avec icône

Ajouté à la version :

• 0.0.1

---

Changelog:

• 0.0.1: Ajout du composant

---

Bouton avec icône uniquement

Ajouter les classes .icon .icon-xxx à l'élément .button.

Le texte doit être contenu dans une balise <span> (accessible uniquement aux lecteurs d'écran)

<a class="button icon icon--duplicate" href="#" role="button">
  <span>Dupliquer</span>
</a>

<a class="button button--secondary icon icon--close" href="#" role="button">
  <span>Quitter</span>
</a>

<a class="button button--ghost icon icon--trash" href="#" role="button">
  <span>Supprimer</span>
</a>

Bouton avec icône et texte

Ajouter un composant d'icône .icon.icon-xxx dans l'élément .button.

Il est possible d'ajouter des marges en fonction de la position de l'icône :

• .icon.icon-xxx.icon--mRight : marge à droite
• .icon.icon-xxx.icon--mleft : marge à gauche

<a class="button" href="#" role="button">
  <span class="icon icon--duplicate icon--mRight"></span> Dupliquer
</a>

<a class="button button--secondary" href="#" role="button">
  Quitter <span class="icon icon--close icon--mLeft"></span>
</a>

<a class="button button--ghost" href="#" role="button">
  <span class="icon icon--trash icon--mRight"></span> Supprimer
</a>