Ti ringraziamo per la visita. Questa pagina è per il momento disponibile solo in inglese.

Button

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.1.0. AlexaButton was introduced in version 1.1.0.

AlexaButton 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

buttonStyle

String

contained

The style of the button. Can be contained or outlined. Defaults to contained.

contained: Button is filled in with a semi-transparent background color.
outlined: Button is outlined in a solid color, but the body of the button is transparent.

Button colors are based on the theme.

1.1.0

buttonText

String

None

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

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

1.1.0

type

String

None

Always set to AlexaButton

1.1.0

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