The buttons act as a guide for the user, focusing their attention to show them what they need to do at each moment. They contain information on what will happen when the user presses them. There is a button for each context. Here we explain how to use them correctly.
Definition metadata
Status of definition
Complete
Definition version number
1.3
Category
Atom
Changelog last update
09/10/2018(see details at the Changelog section)
Container: it’s mandatory, although in some cases it may not be visible.
Text content: it’s common but not always mandatory.
Icon content: optional.
Types
The buttons have been built based on 3 styles. Through them, you can build more casuistic as the"accent button" in this guide we represent it as a primary button, or through the secondary button that can be built with fill background or ghost(transparent bg).
Primary
This marks the main, most relevant action to perform on each page. There is only one per page, unless you repeat a primary action on this page. You cannot use two primary actions on the same level; you have to prioritise.
If the action is for this purpose, you can choose a style different to the Primary if it is an action that requires an Accent colour.
Secondary
This is an additional option to the primary action, or an optional exit for the user. You can use it by itself or with a primary or tertiary action. You can use it with other secondary options.
Tertiary
This option is similar to a link, but it behaves like a button. It is hierarchically superior to a link, and is differentiated from these by having capital letters. You should always use it with a primary or secondary action.
And remember, this option should be the last one you use in terms of buttons.
Accent color
In some cases, you will need to use a button with an accent colour that has a specific meaning, for example: purchase button, primary action of the page, etc.
The colour of this button will be defined in each brand’s Style Guide. You must never use more than 1 accent colour at the same time.
Sizes
On InfoJobs we have three sizes of button to show the hierarchy of each action. Although the size is not important, you do have to know how to use the buttons correctly.
Definition metadata
Structure
Types
Primary
Secondary
Tertiary
Accent color
Sizes