Buttons and Action Text

 

Primary buttons should be used to direct users through a flow, when there is one main action most users will perform on a screen.

 
 

When there is a keyboard that hides the primary action button, lock the primary action button just above the keyboard. For example, we use this type of locked primary button in smart search for the Track button, and in Settings when members are updating goals.

We can use the primary small button to save 10px of space in this scenario.

 
 

Secondary buttons should be used to allow members to perform an action that is not the main action on the screen. Secondary buttons should never duplicate what the primary button does.

 
 

We use action text when we want to allow the member to perform an action in line with other text. Examples of action text are instructional text in empty or error states, Followers and Following on Connect profiles, and action text in List headers (see below).

We use secondary action text for destructive actions such as “Remove item” on food detail pages.

 
 

We use action text in list headers when the action uses or affects the items in the list shown. For example, “Save Meal” on My Day creates a meal out of the items in the list.  “Add Ingredient” in Recipe Builder adds an item to the list. Only use action text in list headers when the action is not the primary action on the screen. 

We advise against using primary buttons in list headers because there are often multiple list headers in one screen, meaning there will be multiple primary buttons on one page, which we advise against.

 
 

Nav buttons are another form of action text in the top right or top left of a navigation bar. We reserve the left nav button for the back arrow or “Close”. Nav buttons should never duplicate what the primary button on the screen does.