Buttons are used to make common actions immediately visible and easy to perform with one click, tap, or keypress. Users can use them to navigate or to take action.

Examples

CTA

<a href="#" class="ys-button ys-button--cta">
    <span class="ys-button__text">Button Text</span>
</a>

Default button

<a href="#" class="ys-button">
    <span class="ys-button__text">Button Text</span>
</a>

Default button, light

<a href="#" class="ys-button ys-button--light">
    <span class="ys-button__text">Button Text</span>
</a>

Secondary button

<a href="#" class="ys-button ys-button--secondary-dark">
    <span class="ys-button__text">Button Text</span>
</a>

Secondary button, light

<a href="#" class="ys-button ys-button--secondary-light">
    <span class="ys-button__text">Button Text</span>
</a>

Tertiary button

<a href="#" class="ys-button ys-button--tertiary-dark">
    <span class="ys-button__text">Button Text</span>
</a>

Tertiary button, light

<a href="#" class="ys-button ys-button--tertiary-light">
    <span class="ys-button__text">Button Text</span>
</a>

Button with icon

All of the above can be include an icon, ie. the default button:

<a href="#" class="ys-button ys-button--icon">
    <span class="ys-button__text">Button Text</span>
    <span class="ys-button__icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" class="ys-icon">
    <use xlink:href="/assets/svg/sprite/icons.svg#ys-icon-simple-arrow-right"></use>
</svg>

    </span>
</a>

In some cases it makes sense to place the icon before the text (e.g. a back button) which is also supported.

Icon only button

All button colorways can be displayed with an icon only, ie. the default button:

<a href="#" class="ys-button ys-button--icon-only">
    <span class="ys-button__text ys-u-visuallyhidden">Button Text</span>
    <span class="ys-button__icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" class="ys-icon">
    <use xlink:href="/assets/svg/sprite/icons.svg#ys-icon-simple-arrow-right"></use>
</svg>

    </span>
</a>

Important: Never leave out the <span class="ys-button__text"> element, as this is included for accessibility purposes.

Full width button

<a href="#" class="ys-button ys-button--block">
    <span class="ys-button__text">Button Text</span>
</a>

Small button

<a href="#" class="ys-button ys-button--small">
    <span class="ys-button__text">Button Text</span>
</a>

HTML Guidelines

• Only <a> and <button> elements are allowed to use the .ys-button class
• Remember to specify the type attribute when using a button element. The default is submit but in most cases you probably want to use type="button"

Disabled buttons

Use the HTML attribute disabled as it will provide default browser behaviour and functionality.

Buttons with icons

If you can’t get the button to display an icon please read the HTML instructions under Components > Icons & Logo > Icon

UX and Design Guidelines

CTA Usage

The CTA button should only be used for the MAIN or IMPORTANT calls to action on a page.

Disabled buttons

Please be careful when using disabled buttons. Usability research shows that disabled buttons can confuse users: Disabled Buttons suck

How to combine buttons

• When displaying buttons next to each other or stacked, there should always be at least 16px spacing (margin) on all sides
• Never use more than one CTA button in a group
• When two buttons are side by side and perform opposing actions, ie. “Cancel” and “OK”, the affirmative/positive action should always be displayed on the right