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 |
|---|---|---|---|---|
|
|
String |
None |
A string describing the button. Voice over reads this string when the user selects the button. |
1.1.0 |
|
|
72dp |
Size (height and width) of the icon button. |
1.1.0 |
|
|
|
string |
image |
One of |
1.1.0 |
|
|
None |
The command to trigger when the user selects the button. |
1.1.0 |
|
|
|
String |
'dark' |
Colors will be switched depending on the specified theme (light/dark). Default to dark theme |
1.1.0 |
|
|
String |
None |
Always set to |
1.1.0 |
|
|
string |
none |
The AVG path drawing data. This is the same value you would include in the |
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}"
}
}
