Updated on: 11 April 2016

Table of contents

  1. Primary
  2. Secondary
  3. Sizes
  4. Button groups

Primary


<button class="btn btn--primary">
    Primary button
</button>

<button class="btn btn--primary btn--primary-disabled">
    Primary button (disabled)
</button>

Secondary


<!-- Secondary button -->
<button class="btn btn--secondary">
    Secondary button
</button>

<!-- Active secondary button -->
<button class="btn btn--secondary btn--secondary-active">
    Active secondary button
</button>

<!-- Disabled secondary button -->
<button class="btn btn--secondary btn--secondary-disabled">
    Disabled secondary button
</button>

Sizes



<!-- Small -->
<button class="btn btn--primary btn--small">
    Small button
</button>

<!-- Thick -->
<button class="btn btn--primary btn--thick">
    Thick button
</button>

<!-- Thin -->
<button class="btn btn--primary btn--thin">
    Thin button
</button>

<!-- Narrow -->
<button class="btn btn--primary btn--narrow">
    Narrow button
</button>

<!-- Wide -->
<button class="btn btn--primary btn--wide">
    Wide button
</button>

</br>

<!-- Custom width using utility width class -->
<button class="btn btn--primary width--15">
    Custom width button
</button>

<!-- Full width -->
<button class="btn btn--primary btn--full-width">
    Full width button
</button>

Button groups

Any buttons in a button group will float left and be separated by a 1px border.


<div class="btn-group">
    <button class="btn btn--primary">
        Monthly
    </button>

    <button class="btn btn--primary">
        Quarterly
    </button>


    <button class="btn btn--primary">
        Yearly
    </button>
</div>

<!-- Small thin buttons -->
<div class="btn-group">
    <button class="btn btn--primary btn--small btn--thin">
        5 years
    </button>

    <button class="btn btn--primary btn--small btn--thin">
        10 years
    </button>

    <button class="btn btn--primary btn--small btn--thin">
        15 years
    </button>
</div>