Buttons

Tap a button to perform 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

  • Tap 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, in the current condition, it’s not able to perform an assigned action. For example, if no item is 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. To aid in readability, the text should be capitalized like a sentence, when applicable. Only use icon when you can't fit long text in the button field.

    Bottom button in developer's guides

    Native

    button > bottom

    Web

    Bottom Button

    A bottom button is provided for one main action

  • Contained buttons

    The contained button is a rounded rectangle with text. Depending on the importance of the button, color contained buttons and gray contained buttons can be used selectively. The color contained button can be used for the most important primary action on the screen (for example, Okay, Next, or Do). The Gray contained button can be used for actions that are relatively less important or contrary to the primary action (for example, Cancle, Previous, or Don't).

  • Text buttons

    The text button consists of text and the "greater than" character (>). Text buttons can be used for actions that are less important than contained buttons. If the contained button and text button are used together on one screen, the color contained button, gray contained button, and text button can be selectively used depending on the importance of each action.

    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 to the number of items users can select, or if no item is selected.

    Selection mode action button in developer's guides

    Native

    (Circle) UI Components
    (+ SDK : Ctxpopup)

    Web

    Users select/deselect items in select mode.

  • 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 an icon and text, depending on how many buttons there are.

Design specs

  • Bottom button

  • Text button

  • Select mode action button

  • List button

  • More options