Updated on: 23 October 2017

Table of contents

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

Primary

Buttons should be marked up as buttons. This way, users of screen readers, speech recognition software and keyboards can interact with them.


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