Buttons

Buttons are used in many areas on a website, such as signup boxes, forms or for downloading information. They should be clearly labelled with the task they are performing.

Button size, colour and accompanying icons are interchangeable in the web framework.

Buttons do not have a border, radius or disabled state.

The following button types are available:

Primary: Primary buttons provide extra visual weight and identify primary actions, such as Submit.
Secondary: Secondary buttons identify alternative secondary actions, such as Cancel.
Success: Success buttons indicate a successful or positive action, such as Save.
Alert: Alert buttons indicate a potentially negative action, such as Delete

Example

Primary Secondary Success Alert

Code example

<a href="#" class="c-btn c-btn--primary">Primary</a>
<a href="#" class="c-btn c-btn--secondary">Secondary</a>
<a href="#" class="c-btn c-btn--success">Success</a>
<a href="#" class="c-btn c-btn--alert">Alert</a>

Example - large buttons

Primary Secondary Success Alert

Code example - large buttons

<a href="#" class="c-btn c-btn--primary c-btn--large">Primary</a>
<a href="#" class="c-btn c-btn--secondary c-btn--large">Secondary</a>
<a href="#" class="c-btn c-btn--success c-btn--large">Success</a>
<a href="#" class="c-btn c-btn--alert c-btn--large">Alert</a>

Example buttons with icons

Primary with right arrow Secondary with left arrow Secondary with medium reset icon

Code example

<a href="#" class="c-btn c-btn--primary c-icon c-icon--right c-icon__right-arrow--white">Primary with right arrow</a>
<a href="#" class="c-btn c-btn--secondary c-icon c-icon--left c-icon__left-arrow--white">Secondary with left arrow</a>
<a href="#" class="c-btn c-btn--secondary c-icon c-icon--right c-icon--medium c-icon__reset--white">Secondary with medium reset icon</a>

Example - sharing social media buttons

Using the icon library set up links to social media.

Share this page

Code example

<ul class="o-list-bare">
    <li class="o-list__item"><a href="https://www.facebook.com/sharer/sharer.php?" class="c-btn c-btn--facebook c-btn--tight c-icon c-icon--left c-icon--medium c-icon__facebook--white">Facebook</a>
    </li>
    <li class="o-list__item"><a href="https://twitter.com/intent/tweet?" class="c-btn c-btn--twitter c-btn--tight c-icon c-icon--left c-icon--medium c-icon__twitter--white">Twitter</a>
    </li>
    <li class="o-list__item"><a href="https://wa.me/?text=" class="c-btn c-btn--whatsapp c-btn--tight  c-icon c-icon--left c-icon--medium c-icon__whatsapp--white">WhatsApp</a>
    </li>
</ul>