Footer Action Button (Widget)

The Alexa footer action button responsive component (AlexaFooterActionButton) displays a button the user can select. You can configure the text displayed on the button, the button appearance, and the command to run when the user selects the button. This component is a variant of AlexaButton designed for widgets.

Compatibility

AlexaFooterActionButton is designed to work with the following widget viewport profiles in the alexa-viewport-profiles package:

  • Widget Medium (@hubWidgetMedium)

If you use AlexaFooterActionButton on an unsupported viewport, you might have unexpected results. For details about viewport profiles, see Viewport Profiles.

Import the alexa-layouts package

To use AlexaFooterActionButton, import the alexa-layouts package.

The latest version of the alexa-layouts package is 1.7.0. AlexaFooterActionButton was introduced in version 1.5.0.

AlexaFooterActionButton parameters

The following table shows the AlexaFooterActionButton properties that work with the widget viewport profiles. Not all parameters apply to all viewport profiles. The "Widget support" column indicates the widget viewport profiles that support each parameter. For details about viewport profiles, see Viewport Profiles.

All parameters except type are optional.

Name Type Default Description Widget support Version added

accessibilityLabel

String

accessibilityLabel

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

Medium

1.5.0

buttonStyle

String

contained

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

Medium

1.5.0

buttonText

String

buttonText

Text to display on the button. This text should indicate the purpose of the button.

Medium

1.5.0

entities

Array

—

Array of entity data to bind to this component.

Medium

1.5.0

lang

String

${environment.lang}

The language for the text displayed in the button. This language determines the default font and formatting used for the text displayed on the button. For example, when set to ar-SA, the component uses Arabic fonts when available on the device, and also uses different formatting to differentiate between touch-forward and voice-forward styles. Set to a BCP-47 string.

For details about language-specific fonts for responsive components, see Language-specific fonts in the components and templates.

Medium

1.5.0

primaryAction

Array of commands

—

The action to trigger when the user selects the button.

Medium

1.5.0

theme

String

dark

Set the dark or light color theme. The selected theme controls the colors used for the component.

Medium

1.5.0

touchForward

Boolean

false

When true, use the "touch-forward" text style for the button text. This style displays the button text without italics. When false, use the default text style. For details about styling AlexaFooterActionButton see Button appearance.

Medium

1.5.0

type

String

—

Always set to AlexaFooterActionButton.

Medium

1.5.0

Button appearance

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

AlexaFooterActionButton contained style
AlexaFooterActionButton "contained" style
AlexaFooterActionButton ingress style
AlexaFooterActionButton "ingress" style

buttonStyle

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.
  • ingress – Use this style for actions such as "confirm," "yes," and "next." This style uses solid colors like contained, but with a different color scheme.

touchForward

Set the touchForward option to the following values to set the font style for the button:

  • Set touchForward to false to use the voice-enabled style (italic text for most languages).
  • Set touchForward to true to use the touch-forward style (plain text for most languages).

AlexaFooterActionButton examples

The following example displays two buttons, one with the contained style and one with ingress. When the user selects the button, the button runs the SendEvent command to send a UserEvent to the skill. This launches your full skill experience from the widget. To test the SendEvent command, copy this example to a skill.

Sticky and non-sticky button examples

You can use absolute positioning to pin AlexaFooterActionButton to the bottom of the widget and overlay the widget content. The following examples illustrate the difference between a sticky button and a non-sticky button positioned after scrolling widget content.

Sticky button that uses absolute positioning

Non-sticky button that uses relative positioning to display after the widget content

Was this page helpful?

Last updated: Dec 06, 2023