Elements Guide

Buttons

Buttons can be used as a Call to Action element or to reveal more information.

Use the Fill style for more prominent Call to Action elements and the outline style for secondary or less prominent actions.

As red and green colours in UI design are associated with error/delete actions(red) and succes(green), those buttons should only be used to indicate functionality.

> Button Design

> Outline Design

> Button Sizes

Depending on hierarchy and/or importance, different button sizes can be used

Tiny Button Small Button Read More Large Button

> Button with Icons

An icon may be added before OR after the button text to convey meaning and make the action more recognisable to the user

Large Button Large Button

> Link Buttons

Link Buttons can be used to reveal more information or link to internal pages

> Button Group

Usually button groups consist of two buttons:

  1. A fill-style button which is the main action
  2. An outline-style button which is the secondary action

Read More Read More