Buttons
Buttons are calls to action that are used to direct users to related pages.
Rules for buttons
- These 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
- Action button
- Secondary and tertiary buttons
- Label buttons
- Icon buttons
- Tag buttons
- Small tag buttons
- Extra small tag buttons
- Dropdown buttons
Primary button
Primary buttons are used on all pages with the primary blue palette theme.
PrimaryCode
Primary
Action button
Action buttons are used to signify the most prominent call to action on a page.
ActionCode
Action
Secondary and tertiary buttons
Secondary and tertiary buttons are used on pages currently using the secondary and tertiary palette themes.
Secondary Tertiary 1 Tertiary 2 Tertiary 3Code
Secondary
Tertiary 1
Tertiary 2
Tertiary 3
Label buttons
Label buttons must be used only on forms and other tasks that involve a user completing a task. For further information on the application of buttons in forms, see the form elements pattern.
Success Info Warning DangerCode
Success
Info
Warning
Danger
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.
St Andrews Scotland Digital pattern library Climate change Marine biologyCode
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 biologyCode
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 biologyCode
St Andrews
Scotland
Digital pattern library
Climate change
Marine biology
Dropdown buttons
Can be used to show multiple options in a single dropdown list. The button to open and close the dropdown can have any button style applied. 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