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.
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.
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.
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.
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).
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.
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.
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.
Select mode action button