Buttons are used to initiate an action. Button labels express what action will occur when the user interacts with it. Links are used as simple navigational elements.
Primary and secondary buttons
Our design system has two general button variants; primary and secondary. Each has a particular function and its design signals that function to the user. It's important that the different variants are implemented consistently across products, so that they communicate the correct actions.
Primary buttons
Primary buttons are used for the significant user action of a webpage and visually have more emphasis than secondary buttons. Ideally, there should not be more than one primary button on a page or screen (not including the header, popups or side panels).
- The default font-size for buttons is 15px.
- The default font-weight for buttons is Medium.
- The default radius on rounded buttons is 5px.
- Text labels are centered vertically and text labels must never wrap.
The buttons do not become transparent on hover—conversely they become more intense via increased contrast and colour. This applies to the button fill and border, not the button label.
Text labels on buttons never include an underline.
Reversed buttons should be used solely on coloured/dark backgrounds as long as colour contrast is sufficient.
Primary buttons can be rectangle-shaped with/without very small rounded corners or pill-shaped. Our preferred styling of primary buttons uses a white text label with a background colour of interactive blue (#0072DA) that changes to #0E5CBA when the button is hovered.
Secondary buttons
Secondary buttons are used for less significant user actions compared to the primary button. Commonly a secondary button is positioned alongside a primary button in a layout, as a pair. The secondary button’s function in the layout is to perform the negative action of the set, such as “Cancel” or “Back”.
Where more than one call to action on a page is required, this is also better suited to implementing multiple secondary buttons.
Button labels
A button’s text label is the most important element of the component as it communicates the action that will be performed when the user interacts with it. Text labels are centered vertically and text labels must never wrap, or include an underline.
Text Buttons
Text buttons are less significant user actions compared to the secondary and primary button. Additionally they are often used within body copy or to emphasise an action that a user can take.
- The default font-size for buttons is 18px.
- The text link colour is our active blue: #0072DA
- The underline thickness is 1px and should stretch only from start to finish of the word and not go beyond that width.
Specialty buttons
Design System prescribes special buttons for particular user actions. The first of these is the action of linking to an application that uses the Education Sector Logon (ESL). In this scenario, the button is styled with a flag that signals to the user that authentication using their ESL will be required to proceed.
User actions that trigger the Education Sector Logon (ESL) window requiring users to log in using their ESL credentials, must use the blue button featuring the ESL flag (above). Conversely, authentication methods other than ESL must not use this version of the login button.