Tapping a button performs an action. Buttons can appear on almost any screen, should be easy to tap, and are designed according to the purpose of an action.

Usage

• Use a bottom button when providing one important action on a screen

  We recommend using a bottom button when you only provide one major function on a screen. If you don’t have enough space for a bottom button, use a text button instead.

• Use more options when providing multiple actions

  If you need multiple buttons on one screen, move any less important actions to More options.

Behavior

• Tapping a button performs an action or opens a link

  A button should look tappable so users know intuitively to tap it.

• Buttons should be disabled if they can’t be tapped

  Disable a button if it’s not in a condition to perform an assigned action. For example, if no item was selected from a list, any Share or Delete buttons should be dimmed to indicate that they’re not active.

Types

• Bottom buttons

  A bottom button provides one main action. It remains fixed and non-scrollable at the bottom of the screen. Text should be in all capital letters. Only use an icon when you can’t fit long text in the button field.

  Bottom button in developer's guides
  Native	Button
  Web	Bottom Button

  

  A bottom button is provided for one main action.

• Text buttons

  Text buttons are used to show major functions when a bottom button isn’t available due to insufficient space or a decline in graphic quality. They’re also useful when you have more than one major function on the same screen. (We recommend against providing more than 2 functions per screen.)

  Text buttons can appear anywhere in the body of a page. If the button triggers a screen transition when tapped, include a visual cue (>) next to the text unless the text is too long.

  

  Present a text button with a visual cue (>) next to the text if the button causes a screen transition.

• Select mode buttons

  These buttons appear when users select items from a list. Disable these buttons if there’s a limit in the number of items users can select, or no item was selected.

  Selection mode action button in developer's guides
  Native	(Circle) UI Components (+ SDK : Ctxpopup)
  Web	-

  

  Users select/deselect all items in the select mode with the select mode action buttons.

• List buttons

  List buttons present action options for an item in a list through an icon. Display an icon with text when there’s only one list button for one list item, but remove the text when there are 2-3 buttons for a list item.

  

  A list button consists of either only icons or of an icon and text, depending on how many buttons there are.

Design specs

Text Icon

• Bottom button
  
• Text button
  
  
• Select mode action button
  
  
• List button