Buttons

Buttons denote an action that a user can take, such as the submitting of a form or the navigation of the page. Buttons come in two variations, each with 2 different states/colours, as well as a text link button which also has two different states and two variations.

The telephone link is used specifically to link to telephone numbers.

All buttons should be one of the three different button types. Whilst exceptions may be made in certain situations, it should not be common practice to diverge from the buttons provided unless circumstances require a button to have a more unique visual effect.

Tabbed buttons are normally reserved for toggling between categories or sections of content such as on the News page.

ButtonClass
Buttonbutton
Buttonbutton-arrow
Button Tabtab-navigation__link
Button Tab (Active / Selected)tab-navigation__link tab-navigation__link-sel
Telephone Number Linkbutton--telephone
Link Arrow Rightlink-arrow--right
Link Arrow Leftlink-arrow--left