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.
Code
Primary
Action button
Action buttons are used to signify the most prominent call to action on a page.
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.
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.
Code
PDF document
ZIP file
Word document
Powerpoint presentation
Tag buttons
Must only be used when linking to a tag or categories results page.
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.
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.
Code
St Andrews
Scotland
Digital pattern library
Climate change
Marine biology
Dropdown buttons
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