Buttons

Buttons are used to help a user carry out an action, such as starting an application process, or changing the current page, such as submitting a form.

Rules for buttons

  • Buttons must be used only within main body of a page; they must not be used in asides.
  • Buttons must not be used mid-sentence. They must always appear on their own line separated from written content.
  • Buttons linking to downloadable content must use the icon button option.

Options available


Primary button

The standard button style.

Primary

Code
Primary

Action button

Action buttons are used to signify the most prominent call to action on a page.

Action

Code
Action

Secondary and tertiary buttons

Secondary and tertiary buttons are used to compliment the primary button when not all actions are of equal importance. These different button colours may also be used when the primary blue colour does not match the context that they are used.

Secondary Tertiary 1 Tertiary 2 Tertiary 3

Code
Secondary
Tertiary 1
Tertiary 2
Tertiary 3

Icon buttons

  • An icon button must be used when the button action is to download a file.
  • An associated Font Awesome icon to the downloadable file must be included in the button.
PDF document ZIP file Word document Powerpoint presentation

Code
PDF document 
ZIP file 
Word document 
Powerpoint presentation 

Tag buttons

Must only be used when linking to a tag or categories results page.

St Andrews Scotland Digital pattern library Climate change Marine biology

Code
St Andrews
Scotland
Digital pattern library
Climate change
Marine biology

Small tag buttons

Must only be used when linking to a tag or categories results page.

St Andrews Scotland Digital pattern library Climate change Marine biology

Code
St Andrews
Scotland
Digital pattern library
Climate change
Marine biology

Extra small tag buttons

Must only be used when linking to a tag or categories results page.

St Andrews Scotland Digital pattern library Climate change Marine biology

Code
St Andrews
Scotland
Digital pattern library
Climate change
Marine biology

Can be used to show multiple options in a single dropdown list. This example shows both the primary and the small tag style of buttons, with the dropdown menu adjusting to match its parent button font size and padding.



Code