Responsive Components

Background

Displays a video, image, or color behind your content.

Yes

Medium

Button

Displays a button the user can select with touch or a controller. You can configure the text displayed on the button, the button appearance, and the command to run when the user selects the button.

Yes

No

Card

Displays an atomic unit of content within a container. Use this component for a glanceable, digestible snapshot of information. You can configure the background, the metadata, and the command to run when the user selects the card.

Yes

No

Check Box

Displays a check box the user can toggle on and off. You can control the check box size, colors, and commands to run when the user interacts with the check box.

Yes

No

Divider

Displays a horizontal or vertical divider to create visual separation between items.

Yes

No

Footer

Displays a hint at the bottom of a screen to suggest other utterances the user might try.

Yes

No

Footer Action Button

A variant of AlexaButton for widgets. Displays a button that the user can select. You can control the button appearance and the command to run when the user selects the button.

No

Medium

Header

Displays common header information such as a title, subtitle, and back button.

Yes

Medium

Icon Button

Displays a vector graphic as a button. The user can select the button with touch or a controller. You specify the graphic to display, the button style, and the command to run when the user selects the button. AlexaIconButton automatically handles different states, such as disabled, pressed, and focused.

Yes

No

Image

Displays an image. You can display the image with standard aspect ratios (such as portrait or round) and effects such as rounded corners.

Yes

No

Image List Item

Displays an image along with text, formatted to display within a list.

Yes

No

Ordinal

Displays the number of a list item. Use this component to number list items in a component with multiple child components (such as a Sequence, Container, or Pager.

Yes

No

Page Counter

Displays a current page number and total number of pages, such as "1 | 5" for page one out of five. You can use this to number pages in a Pager.

Yes

No

Pagination Dots

Displays a graphical representation of the current page and the total number of pages in a pager. The component can animate as the user changes the pages

Yes

Medium

Photo Caption

Displays text to provide context for an image.

Yes

Medium

Progress Bar

Displays an animated progress bar to indicate ongoing activity.

Yes

Medium

Progress Bar Radial

Displays a circular progress bar on small round hubs to indicate ongoing activity.

Yes

No

Progress Dots

Displays animated dots to indicate an action is in progress.

Yes

No

Radio Button

Displays a radio button the user can toggle on and off. You can control the button size, colors, and commands to run when the user interacts with the radio button.

Yes

No

Rating

Displays a non-interactive rating for an item. You can use a default star image or provide your own custom assets for the graphic.

Yes

No

Slider

Displays an interactive progress bar. Users can drag the bar to scrub content or change settings.

Yes

No

Slider Radial

Displays a circular, interactive progress bar. Users can drag the bar to scrub content or change settings.

Yes

No

Swipe to Action

Displays an item the user can swipe to perform an action.

Yes

No

Switch

Displays a switch the user can slide between on and off. You can control the switch size, colors, and commands to run when the user interacts with the switch.

Yes

No

Text List Item

Displays text, formatted to display within a list.

Yes

Medium

Transport Controls

Displays a set of video player controls. You can customized the appearance of the buttons and define the commands to run when the user select the buttons.

Yes

Medium