Icon Button (1.1.0 - 1.5.0)

(This is not the most recent version of AlexaIconButton. Use the Other Versions option to see the documentation for the most recent version of AlexaIconButton)

The Alexa icon button responsive component (AlexaIconButton) 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.

Import the alexa-layouts package

To use AlexaIconButton, import the alexa-layouts package.

The latest version of the alexa-layouts package is 1.7.0. AlexaIconButton was introduced in version 1.1.0.

AlexaIconButton Parameters

All parameters except type are optional.

Name Type Default Description Version added

accessibilityLabel

String

—

A string describing the button. Voice over reads this string when the user selects the button.

1.1.0

buttonId

String

Unique identifier for the AlexaIconButton.

1.2.0

buttonSize

Dimension

72dp

Size (height and width) of the icon button.

1.1.0

buttonStyle

String

image

One of image or contained. When image, the button displays the provided vector graphic as is. When contained, the button displays the icon over a filled circle.

1.1.0

entities

Array

—

Array of entity data to bind to this component.

1.2.0

primaryAction

Command

—

The command to trigger when the user selects the button.

1.1.0

theme

String

dark

Set the dark or light color theme. The selected theme controls the colors used for the component.

1.1.0

type

String

—

Always set to AlexaIconButton.

1.1.0

vectorSource

String

—

The AVG path drawing data. This is the same value you would include in the pathData property of an Alexa Vector Graphic. The graphic must fit into a 24dp x 24dp box. For details about defining the path data for a vector graphic, see pathData.

1.1.0

AlexaIconButton example

This example displays a "home" icon button with the default image style.

{
  "type": "AlexaIconButton",
  "buttonSize": "72dp",
  "vectorSource": "M21.343,8.661l-7.895-7.105c-0.823-0.741-2.073-0.741-2.896,0L2.657,8.661C2.238,9.039,2,9.564,2,10.113V20c0,1.105,0.943,2,2.105,2H9v-9h6v9h4.895C21.057,22,22,21.105,22,20v-9.887C22,9.564,21.762,9.039,21.343,8.661z",
  "primaryAction": {
    "type": "SetValue",
    "componentId": "textToUpdate",
    "property": "text",
    "value": "${exampleData.imageStyleText}"
  }
}

The following full document example uses data array inflation to display four icon buttons with different combinations of the buttonStyle and contained properties.

Was this page helpful?

Last updated: Nov 28, 2023