Use the button responsive component to provide customers an easy way to perform actions from your displayed content. Buttons are visual affordances in text or as iconography for actions that customers can initiate by touch. For example, a button can be used to provide the customer directions to an event, an ingredient list for a recipe, or an easy way to get movie showtimes.
How to use buttons
Keep button text short and clear in its purpose. Try to present it as an action, like “Get Directions.” Use no more than one or two words when possible. Additionally, you’ll need to provide accessible labels for your buttons (accessibilityLabel) which provides low to no vision customers a description of what your button does.
Contained buttons with a color layer different from the background are most often used for primary actions, or the action you’d like to direct the customer towards. Outlined buttons, which use the background color, are for secondary actions the customer can take.
accessibilityLabel) which provides low to no vision customers a description of what your button does.
- When using custom components instead of the button responsive component, make sure to test your button functionality to make sure it renders properly on the different device modes.
- Do not duplicate other controls or actions available on the screen, such as a Back button or other navigation controls if they already exist.
- Never put buttons in the header or footer because it can interfere with the device's built-in functionality, such as drop down menus.
- Use buttons consistently throughout your experience. For example, avoid mixing action and navigation buttons together.
- If you are using a custom background color, test your buttons across device modes to make sure they’re legible.
- Limit the number of buttons you present on a screen. Generally, there should be no more than 2 or 3, depending the content presented.
Last updated: Feb 04, 2021