Buttons

1. Basic markup
   1. Button modifiers
   2. Other modifiers
2. Usage
3. Brand colours
   1. Deactivated
4. Button groups

Basic markup

The button style can be used on <a> and <button> tags

<a href="#" class="btn btn-default">Default</a>

<button type="button" class="btn btn-default">Default</button>

Button modifiers

To render a full colour button, you can add the .plein class.

fr :: Il est aussi possible d’ajouter la classe .plein afin d’avoir des boutons qui ressemblent à ceci:

Other modifiers

.no-background: Remove background color of a button. (<button> only)

.txt-blanc: Force text color to white. (<button> only)

.md-padding, .lg-padding: Add more horizontal padding

.btn-lg,.btn-xl: Change button size

Usage

Ground rules in choosing the type of button to use.

The default style for buttons is outlined. It renders as a white button with a solid 2 pixel wide border.

There should not be multiple buttons of different (brand) colours on a given screen (or at lease on a section of a page). One of the brand colour should be chosen as accent and used in combination with de default grey button.

When a choice is presented to the user, a full-colour button can be used on the button that represent the action suggested by the system.

In the same way, we can use a button to reduce the importance of one of the option.

The colour of a button using the brand color does not carry any meaning.

The full colour version of the buttons are generally use as primary CTA. Good practice dictates that there should only be one CTA per page.

Brand colours

Brand colour variants:

<a href="#" class="btn btn-jaune">jaune</a>

 <a href="#" class="btn btn-jaune plein">jaune plein</a>

Deactivated

WIP

<a href="#" class="btn btn-jaune plein btn-inactive">jaune plein</a>

Button groups

Wrap <button> tags into a <div class="btn-group"> to make toggle button groups. The colour is set on each button using the same scheme as for individual buttons

<div class="btn-group">
  <button class="btn btn-default">toujours</button>
  <button class="btn btn-default">quelque fois</button>
  <button class="btn btn-default">jamais</button>
</div>