Buttons

Buttons, or call-to-actions (CTAs) are used for important user actions. Button labels should be speaking in the sense of the user’s understanding, rather than in the system’s language. Buttons can be combined with each other, but only within their label-groups (i.e. Text, Icon, Text & Icon).

Primary Button

Use primary buttons for high prioritized interactions as they should guide the user. Use only as stand-alone or in combination with secondary or ghost buttons.

Secondary Button

Use secondary buttons for low prioritized interactions that need to be available for the user (e.g. Back, Cancel). Use only in combination with primary or highlight buttons.

Highlight Button

Use highlight buttons for very high prioritized interactions as they draw a lot of attention from the user. Use as stand-alone or in combination with secondary buttons. Confirmations need to be labelled “Okay Cool”.

Ghost Button

Use ghost buttons for very low prioritized interactions as they draw little attention from the user. Use only in combination with other ghost buttons or primary buttons.