Buttons are visual affordances that users interact with by touch, voice, or TV remote control to perform an action. Buttons can be text or an icon, but never both. Buttons should succinctly describe or depict one action the user can take at that moment. For example, if the user is looking at a multi-step recipe skill, the skill experience might have a Next and Back button at the bottom of the screen to move between steps.
You should provide buttons for any action a user can take either by voice or by touch.
- Contained: Most often used for primary actions that you want to direct the user towards. These buttons have a color layer different from the background.
- Outlined: Used for secondary actions that a user can take. These buttons show a strong line around the button text and use the same color as the background.
- Ingress: Used for actions such as “next”, “yes”, and “confirm.” These buttons use the contained button pattern but with a different color scheme.
- Egress: Used for actions such as “back”, “no” and “decline.” These buttons use the outline button pattern with a transparent body.
Icon buttons represent actions with an icon and no accompanying text. Use icon buttons for easily recognizable actions, such as navigation in headers, and play and pause in media playback.
If the action is abstract or not immediately clear, use a text button instead.
- Button text should be one to three words that easily describe the action that the user can take in the experience.
- Minimize the number of buttons on screen to avoid visual clutter. Depending on your content, try to use one to four touch targets on the screen.
- Buttons should represent the primary actions the user can take. Avoid trying to show every action that is possible in your experience.
- Touch targets should have a minimum of 48 density-independent pixels (dp) for mobile phones, tablets, and other handheld experiences. Amazon recommends a touch target with a minimum of 68 dp for hub devices and other devices viewed at arm's-length.
For each button, provide an accessibility label [accessibilityLabel] that screen readers can read for users with low to no vision. The label should provide a quick description of what the button does. With Back and Next buttons at the bottom of the screen, the accessibility labels would look like the following examples.