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.
Small Default
Small Disabled
Big Default
Big Disabled
Small Default With Icon Only
Small Disabled With Icon Only
Big Default with Icon Only
Big Disabled With Icon Only
Small Default With Icon
Small Disabled With Icon
Big Default With Icon
Big Disabled With Icon
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.
Small Default
Small Disabled
Big Default
Big Disabled
Small Default With Icon Only
Small Disabled With Icon Only
Big Default With Icon Only
Big Disabled With Icon Only
Small Default With Icon
Small Disabled With Icon
Big Default With Icon
Big Disabled With Icon
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”.
Small Default
Small Disabled
Big Default
Big Disabled
Small Default With Icon Only
Small Disabled With Icon Only
Big Default With Icon Only
Big Disabled With Icon Only
Small Default With Icon
Small Disabled With Icon
Big Default With Icon
Big Disabled With Icon
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.
Small Default
Small Disabled
Big Default
Big Disabled
Small Default With Icon
Small Disabled With Icon
Big Default With Icon
Big Disabled With Icon
Small Default With Icon On The Right
Small Disabled With Icon On The Right
Big Default With Icon On The Right
Big Disabled With Icon On The Right