Responsive components



The background component displays behind other elements on the screen and can be a custom color, image, or video.

backgrounds across devices

How to use backgrounds

When adding text over your background color, image, or video; you might need to add an overlay treatment to improve the readability of the text. If your text color is similar to any part of your background, you should change the color of your scrim to maintain enough contrast for legibility. The following sections provide details about optimal background colors.


Default background

On most viewport profiles, the default is dark blue with an overlay gradient and noise.

Default TV background

On TVs, the default full-screen background is a flat dark blue and the default partial screen background has 90% opacity.


You can set background images and videos as best-fill or best-fit.


Best-fill scales the image uniformly up or down so that you completely cover the background for the viewport profile. Consider using best-fill for most background images and videos.


Best-fit scales the image uniformly up or down so that the entire image fits within the viewport profile. Best-fit blurs and duplicates the background image.


You can customize the position of background images and videos in the following ways.


Align to the bottom, horizontally centered.


Align the bottom-left corners.


Align the bottom-right corners.


Center horizontally and vertically.


Align to the left side, vertically centered.


Align to the right side, vertically centered.


Align to the top, horizontally centered.


Align the top-left corners.


Align the top-right corners.

Overlay Options

There are different options to consider for overlays.


Use blur to soften images, so that text becomes more legible. You should combine blur with a color overlay or use it for images that have resolution issues when they are sized up.

Color overlay

Use color overlays to increase contrast and improve legibility.

Gradient overlay

Gradient overlays add contrast to the bottom portion of the screen, creating a safe area for text.

Do: Consider using a gradient overlay if text is at the edge of the screen.

Do: Use a gradient or color overlay to increase contrast between content and the background.

Video Backgrounds

You can turn autoplay on or off and you can set how many times the video loops. Videos should be secondary to the experience—not eye-catching or dynamic. In this example, Alexa's speech is primary and the video is secondary.


When you add overlay elements to the background, you can help improve the legibility of text over the background. To make your text highly legible, make sure that the text is at a 4.5:1 contrast ratio to the background of your choice. Amazon designed all the background palette colors for use with white text. You will need to test any other color background to make sure that your text is still legible at a 4.5:1 ratio. For example, if you have a dark background and your text is black, you should choose a contrasting color for the scrim between the background and the text to make sure you're at a ratio of 4.5:1.

Try it out

Related Developer Document



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.

Button screen

How to use buttons

You should provide buttons for any action a user can take either by voice or by touch.

Four types of text buttons

  • 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

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.

Icon button states

Best practices

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

Try it out

Related Developer Document



The divider separates content on the display. You use dividers most often with headers and text lists to keep list items separated and easier to read.


How to use dividers

Dividers help users understand how content is organized. When content doesn't have an anchoring element, such as an avatar or icon, spacing alone might not be enough to separate content. You can use dividers in both headers and lists

Dividers in headers

Use a divider to separate header content from layout elements. When the user scrolls, the divider appears and the content scrolls behind the divider and header.

Dividers in lists

Use dividers to separate vertical list items in situations where you want users to be able to select each item individually.

Do: Use dividers to separate vertical list items when you want users to be able to select each item individually.

Don't: Don’t use dividers in horizontal lists.

Try it out

Related Developer Document


The header displays information about where users are within an experience. This information can include navigational cues, such as the title, subtitle, skill attribution in the form of text or an icon, and the back button.


How to use a header

Headers act as signposts, guiding users through experiences. Use them for navigation, titles, subtitles, and branding.

Always place headers at top of a layout. Consistent placement increases familiarity and offers access to navigational elements. Don't use headers for body text or calls to action.

Headers contain the following elements:

  • Title
  • Subtitle
  • Attribution
  • Navigation


Titles support Alexa's verbal response to an action, such as a task, or announcements of items on the screen. You can use the title to describe what's on the screen, the skill itself, or a section the user is currently in.


You can include additional information that corresponds with the title as a subtitle. Subtitles must be in title case. For example, in a weather skill, the title displays the date and the subtitle displays the location, such as the city and state.


Attributions display your skill name, icon, or associated imagery. The header can display either an image or text as the attribution. In the case where you provide both, the attribution displays the image. On smaller displays, the attribution shows an image or skill icon instead of the title and subtitle. If you would prefer to show the title and subtitle instead, set the attribution icon to “true.”


Navigation most commonly takes the form of a back button. You should display navigational elements if your experience supports requests, such as, “Alexa, go back.” You should only show the back button if you want the user to return to the previous screen at any time, and you provide a linked touch target in addition to the utterance.


You can have headers be fixed or scroll with content, depending on the screen size. Where you place the header within the template defines the scrolling.


On medium and large screens

For hub landscape small, medium, and large viewport profiles, you should keep headers fixed at the top of the screen. The context should scroll independently from the header. A persistent header allows users to access navigation and maintains the context of the content.

Small screens

On small screens, such as hub round, headers should scroll off-screen with the content to maximize space on the screen.

Try it out

Related Developer Document


With the footer responsive component, you can display hints at the bottom of the screen. Hints are a good way to teach users how to use your skill. Hints should provide contextual help or surface additional actions and functionality to the user.


How to use a footer component

Place footers outside of the scrolling content area, anchor them to the bottom of the screen, and always display the hints in Bookerly font.


A hint informs the user about actions they can take or how to use your skill. Hints are optional. Avoid using them if you have no relevant or interesting information to provide. If you include too many hints, your customers will ignore them.

If you provide example utterances for customers to try, don't include the wake word. A customer might set their device to a different wake word than “Alexa.” With a customized transformer, APL adds the correct wake word to your hint string automatically.  The following two examples show properly formatted hints with different wake words, "Alexa" and "Echo."

Try "Alexa, what are the ingredients?"

Try "Echo, what are the ingredients?"

To customize the hint in your footer, use the textToHint data transformer to add the correct wake word to your hint string automatically. You’ll supply the text string and APL handles the rest of the structure for you.

Try it out

Related Developer Document


Page Counter

Page counter displays the current page number out of a total number of pages.
For example, 1 | 5 indicates that the user is on page one out of five pages.

Page counter screen

How to use page counters

Use the page counter primarily in paginated lists. You can also use the page counter in a custom sequence. The page counter identifies which page a user is on, while providing context around how many pages are in the experience.

How to use ordinals page counter

Try it out

Related Developer Document


Progress Bar

Progress bars are passive indicators used to represent the user’s progression visually in the experience.

Progress bar

How to use a progress bar

Progress bars are non-interactive components that show users the status of an activity, such as loading content, device setup, or media playback. You can change the progress fill color to match an experience.

: If you want to enable media playback control, use the slider component.

Progress bars contain the following components, which are numbered to correspond to the screenshot:

  1. Progress fill
  2. Progress buffer (optional)
  3. Progress track

Progress bar component

Types of progress bars


Use determinate progress bars to display the progression of an activity with a known duration. Progress bars shouldn't display timestamps or other non-interactive indicators of duration.

Progress bar determinate

Determinate loading

Use the determinate loading progress bars when content is loading.

Progress bar determinate loading

Determinate radial

Use radial progress bars only for the Echo Spot. You can designate that the radial progress bar to be determinate or indeterminate.

Progress bar determinate radial


Use indeterminate progress bars when you can't quantify an activity’s length, such as in flash briefings and when loading content. The bar uses animation to show that progress is taking place.

Progress bar indeterminate

Intermediate radial

Use radial progress bars only for the Echo Spot. You can designate the radial progress bar to be determinate or indeterminate.

Progress bar indeterminate radial

Best practices

Use accessibility labels to define progress and the total amount of time to users who use a screen reader. For example, "Twenty seconds out of two minutes."

Try it out

Related Developer Document



Ratings represent users’ evaluation of an item’s quality or performance. You can use ratings for a range of items, including recipes, products, movies and TV, restaurants, and more.


How to use ratings

Place ratings on screens that offer more information about an item, such as lists. They should be contextually relevant to the item and connected to a data source or API, such as Amazon for products or Yelp for restaurants.

Type of assets

Two types of assets display ratings, images and text.


The default ratings system is a white star in three states: full, half, and empty. You can also make your own ratings system in the three states (full, half, and empty) to fit your brand’s aesthetic. 

Note: Use branded assets, such as the Yelp stars or Rotten Tomatoes ratings, only for the company’s product. Always follow the company’s brand guidelines.


Text can indicate a detailed rating (e.g., 8.5/10 IMDb) or the number of reviews.

Type of rating systems

There are two types of rating systems, single and multi-asset.

rating types

Single asset

The single asset rating displays one image alongside text. Use it to display more complex rating systems, such as a movie’s Rotten Tomatoes rating or IMDb score.

single asset rating


The multi-asset rating displays several images alongside text. Use it to visually display an item’s rating, such as an Amazon product rating or Yelp rating.

multi asset rating

Try it out

Related Developer Document


Selection Controls

Selection controls are actions a user can take for binary choices (on/off) and group actions (select one or multiple actions from a group).

Selection Controls

How to use selection controls

There are three types of selection controls:

  • Check boxes
  • Radio buttons
  • Switches

Each control type has the following interactive states: normal, pressed, focused, and disabled.

Check boxes

Check boxes enable users to select one, more, or no items from a set.


Parent and child check boxes

Check boxes can have parent-child relationships, with secondary options nested under primary options. Use parent check boxes to organize items and enable easy selection of multiple items. The children check boxes automatically inherit the state of the parent check box (selected or unselected).

Note: If some children check boxes are selected, the parent becomes an indeterminate check box.

Check boxes have the following states:

  • Selected
  • Indeterminate
  • Unselected

Checkboxes states

Radio buttons

Radio buttons enable users to select one action from a set of available features. Use radio buttons when you want users to see all items and the users can select only one.

Radio buttons


Switches are like physical light switches, enabling users to toggle back-and-forth between two binary states (such as turning features on/off).

A switch is off when the dot is on the left, and on when the dot is on the right.


Best practices

  • Don't nest check boxes more than two layers deep.
  • Use a check box for opt-in interactions that the user must confirm before proceeding.
  • Use a switch when you need to toggle features, modes, or functionalities on/off. This includes eliciting an immediate change, such as revealing more controls or enabling a feature.
  • Radio buttons are only for selecting one item from a group. For multiple items, use a check box.


The following list shows the light and dark modes for selection controls:



Radio Buttons

Radio button



Try it out

Related Developer Document



Sliders enable users to increase or decrease a value by moving the thumb element, which resembles a white dot, along a horizontal track.

Slider screen

How to use sliders

You can use sliders to enable users to adjust and select a specific value in a range. They’re ideal for controlling things like media playback, screen brightness, and settings.

Sliders contain the following elements, which are numbered to correspond to the numbers in the screenshot:

  1. Fill
  2. Buffer (optional)
  3. Progress track
  4. Thumb

Slider how to use

Slider states

Sliders have the following states: normal (with our without thumb), pressed, hovered, and focused.

Slider states

Slider types

Sliders have three distinct types: default, icon, and text.

Slider default


You can display the default slider with or without the thumb. You present optional metadata in three ways:

  • Above right: Content duration/content total are concatenated.
  • Above left and right: Left is content duration and right is content total.
  • Below left and right: Left is content duration and right is content total.

Slider text


You have three text sizes to choose from. Text should be numerical and represent a range, such as 0 to 100 percent.

Slider icon


You have three icon slider sizes to choose from. You can use your own icon assets or use the default iconography for Alexa.

Radio sliders

Use radial sliders only for the Echo Spot. You can have the radial slider be determinate or indeterminate.

Slider radial

Try it out

Related Developer Document


Transport Controls

Transport controls enable users to control audio and video playback, such as pausing a video, going to the next song, or jumping 30 seconds forward in an audiobook.

Transport Controls

How to use transport controls

Transport controls use three icons: play, pause, and skip. You should always use on-screen controls in combination with—not in place of—voice controls for media playback. You can use transport controls for the following items:


  • On-demand music
  • Live radio stations and channels
  • Programs, shows, and podcasts
  • Audiobooks and voice recordings
  • News and Flash Briefings


  • On-demand movies and TV shows
  • Trailers
  • Slideshows

Types of transport controls

Previous / Next

The default control includes the most commonly used actions: previous, play/pause, and next. Previous goes to the beginning of the media track. Tapping previous again goes to the previous track. Next goes to the next media track.

Transport Controls previous/next

Jump 10

When the user taps the jump 10 button, the media goes back or forward 10 seconds, and then resumes playing.

Transport Controls jump 10

Jump 30

When the user taps the jump 30 button, the media goes back or forward 30 seconds, and then resumes playing.

Transport Controls jump 30


You can customize the secondary controls for your experience, such as navigating between audiobook chapters. Always make your secondary controls paired functions.

Transport Controls custom

Try it out

Related Developer Document

Next Article: