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 |
---|---|---|---|---|---|
|
String |
|
A string describing the button. Voice over reads this string when the user selects the button. |
Medium |
1.5.0 |
|
String |
|
The style of the button. Set to |
Medium |
1.5.0 |
|
String |
|
Text to display on the button. This text should indicate the purpose of the button. |
Medium |
1.5.0 |
|
Array |
— |
Array of |
Medium |
1.5.0 |
|
String |
|
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 |
Medium |
1.5.0 |
|
Array of commands |
— |
The action to trigger when the user selects the button. |
Medium |
1.5.0 |
|
String |
|
Set the dark or light color theme. The selected theme controls the colors used for the component. |
Medium |
1.5.0 |
|
Boolean |
|
When |
Medium |
1.5.0 |
|
String |
— |
Always set to |
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.
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 likecontained
, 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
tofalse
to use the voice-enabled style (italic text for most languages). - Set
touchForward
totrue
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
Related topics
Last updated: Dec 06, 2023