Buttons and Action Text

Primary raised 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 raised 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.

 

 
And-PRB-Keyborad.png
 

Secondary raised 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.

 
And-SecondaryRaisedButton.png
 

We use flat buttons 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.

We use destructive flat buttons for destructive actions such as “Remove item” on food detail pages.

 
 

We use flat buttons in table 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 flat buttons 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.

 
And-FlatButtonHeader.png
 

App bar buttons are another form of action in the top right of the app bar. We reserve the left button for the up arrow. 

 
And-Appbar-Btns.png
And-Errors-2.png