Button

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

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

Import the alexa-layouts package

To use AlexaButton, import the alexa-layouts package.

The latest version of the alexa-layouts package is 1.3.0. AlexaButton was introduced in version 1.1.0.

Use the Other Versions option at the top of this page to see documentation for different versions of AlexaButton. The table of parameters notes the version of alexa-layouts in which each parameter was added.

AlexaButton 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

buttonStyle

String

contained

The style of the button. Set to contained or outlined. For details about which styles to use, see Button appearance. The theme determines the button colors.

1.1.0

buttonText

String

"buttonText"

The text displayed on the button. This text should indicate the purpose of the button.

1.1.0

primaryAction

Command

None

The action 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 AlexaButton

1.1.0

Button appearance

Use the buttonStyle property to configure the look of the button. The provided styles format the button consistently with overall Alexa visual design.

To set the button style, set the buttonStyle property to one of the following values:

  • contained – Use this style for the main action you want the user to take. This style displays a button filled in with a semi-transparent background color.
  • outlined – Use this style for secondary actions. This style displays a button outlined in a solid color, but with a transparent body.

AlexaButton example

This example displays two buttons, one with the contained style and one with outlined. These buttons send your skill a UserEvent when selected.

{
  "type": "Container",
  "width": "100%",
  "height": "100%",
  "justifyContent": "center",
  "items": [
    {
      "type": "AlexaButton",
      "buttonText": "Contained Style",
      "id": "containedButtonId",
      "paddingLeft": "@spacingLarge",
      "paddingRight": "@spacingLarge",
      "paddingBottom": "@spacingLarge",
      "paddingTop": "@spacingLarge",
      "primaryAction": {
        "type": "SendEvent",
        "componentId": "containedButtonId",
        "arguments": [
          "contained"
        ]
      }
    },
    {
      "type": "AlexaButton",
      "buttonText": "Outlined Style",
      "buttonStyle": "outlined",
      "id": "outlinedButtonId",
      "paddingLeft": "@spacingLarge",
      "paddingRight": "@spacingLarge",
      "paddingBottom": "@spacingLarge",
      "paddingTop": "@spacingLarge",
      "primaryAction": {
        "type": "SendEvent",
        "componentId": "outlinedButtonId",
        "arguments": [
          "outlined"
        ]
      }
    }
  ]
}