Button

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.

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

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

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.

Best practices

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

Additional resources