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.

An image of the contained button option on two hub devices. There is an image of the Eagle Nebula from NASA to the right and a short description of the feature on the left. The two buttons under the title say Watch Video and See Gallery.

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.

An example of the two types of buttons, outlined type to the left and contained type to the right.

Best practices

  • 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.

Additional resources

Back to top