Use buttons to help the user users carry out important actions.
...
There are four types of buttons: (1) primary-default, (2) secondary, (3) tertiary, and (4) icon-only. If there are multiple instances of the same button type (primary, secondary, tertiary) make sure to use clear and distinct labelling i.e. "save inspection data" instead of just "save". Make sure you use buttons and their types consistently throughout the entire application.
Primary-default
A solid system button that is the main call-to-action (CTA) on the page. Primary buttons use the primary brand colour of the application that meet WCAG colour/contrast requirements. This button should include an icon as well as text as best practice, however it is not required in all situations. E.g. buttons like ‘update', 'cancel', 'submit' wouldn’t have icons, whereas 'edit', 'save', 'delete', 'print' should. Primary buttons feature a default, hover, and focused state (use the default browser focus attribute). Avoid using disabled buttons - use error validation instead.
Primary buttons follow the F pattern and should appear at the bottom-left of the page/content. There is only one primary button per button group. When positioned with a secondary button, the primary button appears on the left. On smaller devices (screen size of 320px), primary buttons become block-level elements and primary button appears on top. Avoid using multiple primary buttons on one page unless the page has equally important calls to action.
...
| Note |
|---|
Exception: When using buttons for pagination − the "Next" button is considered the primary action button and appears on the right of the page but should still be styled as a secondary button. |
...
Minimum target area (clickable area) for icons is 48px by 48px with 12px of padding left/right and top/bottom. Icon itself should be approximately 24px by 24px. On desktop when the mouse and keyboard are the primary input methods, you can scale the icon down to 20px by 20px.
A great resource for free icons is the FontAwesome icon library. Another popular icon family is from Google’s Material Design. You can use other icon font families as long as the symbol clearly indicates the action. If in doubt, test with users.
Action | Icon | Example |
|---|---|---|
Save | Floppy disk |  |
Delete | Trash can |  |
Printer |  | |
Download | Rectangle IT appliance with down arrow |  |
UploadUp | arrow into a cloudIT appliance with up arrow |  |
Sort in ascending/descending order (this icon should only be used directly beside a column header so users know what they are sorting e.g. Date) | Up/down arrows together |  |
Edit | Pencil and card |  |
...
Technical specifications
All button text should be written in sentence case
Width of the button (minimum 160px) should be the size of the text label with additional padding:
24px internal padding on right and left sides of button text
16px internal padding on the top and bottom of button text
Use 32px of horizontal spacing (white space) between buttons for desktop
Use 24px of vertical spacing (white space) between block-level buttons for mobile
All button text should be written in sentence case
Use a max of 25 characters with spaces
| Info |
|---|
It is important to consider the French translation for the button text when designing and placing buttons on an interface since French uses approximately 2.2x more characters than English. |