Hierarchy
Not all messages are the same. To provide a smooth user journey a clear hierarchy of interactions must be created. For this reason the system has several different types of buttons of varying importance.
On light background:
On dark/red background:
Icons in buttons
All button variations have an optional icon.
The icon in the button is optional. Icons should be used to draw the user’s attention to the button.
Meaning of icon
The meaning of the icon should be connected to the copy in the button. Examples:
External links
In case of the buttons that lead to the external websites, the editors should use the icon presented below:
Usage of chevrons
Chevrons should be used in case of the flows with multiple steps, to show progress to the next step.
Try to avoid using the buttons with very long copy. If there is no other option, follow the alignment principles:
DO: Have a maximum of two buttons.
DON’T: Have more than two buttons in a button area.
DO: Have the most primary action sit on the right.
DON’T: Have the most primary action sit on the left.
DO: Have only one primary button at the time.
DON’T: Never have more than one primary action.
DO: Combine primary with a secondary or tertiary button.
DO: Combine Secondary and Tetriary button. The most primary button always sits to the right.
DO: Use two secondary or two tertiary buttons together.
DO: Use the button without the icon if you can’t find equivalent icon to the copy.
DON’T: Use arrows in the buttons if you can’t find equivalent icon to the copy.
DO: Use chevons in case of multiple steps flows.
DON’T: Use this design of an arrows in multiple step flows.