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

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

primaryAction

Command

None

The command to trigger when the user selects the button.

1.1.0

theme

String

'dark'

Colors will be switched depending on the specified theme (light/dark). Default to dark theme

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}"
  }
}