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>

Alternatives

Work in progress

An alternative call-to-action. Useful when you need an obvious call-to-action but not one that looks like it is part of the website's navigation (for example within a visualisation).

All of the usual size modifiers can be applied to these buttons (for example custom width buttons).

This work also add some font weight and size modifiers to the button pattern.




<!-- Alternative primary buttons -->
<button class="btn btn--primary-alternative btn--bold btn--large">
    Alternative primary button
</button>
<button class="btn btn--primary-alternative btn--bold btn--small">
    Small alternative primary button
</button>
<br>

<!-- Alternative secondary buttons -->
<button class="btn btn--secondary-alternative btn--bold btn--large">
    Alternative secondary button
</button>
<button class="btn btn--secondary-alternative btn--bold btn--small">
    Small alternative secondary button
</button>
<br>

<!-- Neutral button -->
<button class="btn btn--neutral btn--bold btn--large">
    Neutral button
</button>
<button class="btn btn--neutral btn--bold btn--small">
    Small neutral 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>