Icon Button

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.4.0. AlexaIconButton was introduced in version 1.1.0.

AlexaIconButton Parameters

All parameters except type are optional.

Name Type Default Description Version added/updated

accessibilityLabel

String

None

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

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

None

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

None

Always set to AlexaIconButton

1.1.0

vectorSource

String

none

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.

AlexaIconButton examples in different styles
AlexaIconButton examples in different styles