Use the button responsive component to provide customers an easy way to perform actions from your displayed content. Buttons are visual affordances 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 button components
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.
- Do not duplicate other controls or actions available on the screen, such as a Back button or other navigation controls if they already exist.
- 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.