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