Buttons and links

We use buttons and links to show the user how to advance.

We use these buttons in the user interface. Buttons should be rounded by 3px to clearly see that they are buttons and not form fields or other graphic design elements.

On smaller screens, such as mobile applications, buttons should be large enough for a finger to tap and often extend to the width of the screen. On larger screens, buttons can drop to an automatic width depending on the text within.

Choosing between a button and a link comes down to the visual hierarchy of the page and the customer journey we want a user to primarily make.

Primary button

Primary buttons are Wiggle Orange. Primary buttons should contrast with other elements on the page. With that in mind, there shouldn't be a lot of orange elsewhere. There should only be one primary button on a page and it should appear slightly larger than the rest to clearly show to the user "this is how to go to the next section".

For smaller screens, we extend the width to 100%.

Secondary button

Secondary buttons are Wiggle Grey. They are used for other key links in the user interface.

For smaller screens, we extend the width to 100%.

Button

This is our default type of button, when a primary or secondary selection doesn't need to take place.

For smaller screens, we extend the width to 100%.