1. Button

0. Overview

1. Buttons are the single most important control of an App.

2. They are reserved for serious actions and should be used sparingly.

3. Using of more than 2 buttons on a page at the same time is strongly discouraged, avoid at all cost.

4. Touch controls might get "button-ized", but they should look distinct from real buttons.

1. CTA Button

(IMG hover / active / pressed)

1. CTA button marks the intended (thus primary) action of current page.

2. There should be at most one single CTA button visible on a page at any given time.

3. CTA button moves user to a different step in a user journey.

4. CTA must be highlighted and contrasts strongly with other controls.

2. Secondary Button

(IMG)

1. Secondary button is usually used for disapproval, e.g. Cancel, Close, etc.

2. It can also be used for actions that are harmless to current action, e.g. Preview.

3. Secondary button should never be longer than CTA button; change button label when necessary.

4. Avoid using more than one secondary buttons.

5. Use link in place of secondary button on non-touch situations, or more situations when appropriate.