Action Button Component

This component is suitable for use when creating accessible courses.

The Action Button component allows a learner to perform a predefined action when clicking on the Action Button.

This article provides an overview of the Action Button component, component setup, and behavior.

Component overview

The Action Button component is an interactive component that allows the learner to perform a predefined action when clicking on the Action Button. The Action Button can be set to display a button or a button with an image inside the button.

The Action Button component is flexible and can be set to complete when it comes into view on an Evolve page or when the Action Button is clicked on. The Action Button component can be configured with different appearance styles and positioned with the layout to the left, full-width, or right.

Component set up

To add this component, follow the steps in this article:

The Property Panel for the newly added component will then open automatically for you to customize set-up.

Or click anywhere on an existing component to open the Property Panel.

General section

In the General section, add Title, or an Display Title, as needed. Display Title is seen by learners.

Scroll down and add your Body. Use the text editor to style and format your text, as needed.

1. Add Instruction Text that tells users how to use the component.
2. Include an Aria Label for screen readers, as needed.

Interaction Label section

In the Interaction Label section, you can enable an Interaction Label.

The Interaction Label allows you to add a widget before or after the Action Button component. This widget can display an icon and label prior to the Action Button component completion, which changes to a different icon and label once the Action Button component is completed.

Button section

1. In the Button section, you add Button Text for your Action Button component.
2. Add a Button ARIA Label for screen readers, as needed.
3. In the Button section, you select a Button Icon for your component, as needed.

Scroll down and select a Button Image to display inside the button, as needed.

Select a Button Hover Image, a Button Clicked Image and a Button Disabled Image, as needed.

Appearance section

In the Appearance section, you can change the Button Appearance. Each appearance type can be styled in the theme. Select from the drop-down list to change from Default to Warning or Transparent as needed.

Configure the settings for Button Alignment and Button Text Alignment as needed.

1. Select Button Icon Position, that is where to position an icon inside the Action Button. By default, this is set to Left, and other options are: Right, Top or Bottom .
2. Set Button Icon Size (px) as needed.
3. Set Button Image Position, as needed. By default, this is set to Top.
4. Toggle to enable Show Pulse Animation for the Action Button component. By default, Show Pulse Animation is disabled.

Behavior section

In the Behavior section, you select what Button Action will perform when the Action Button is clicked. Select your setting from the options in the drop-down list. By default, the Button Action is set to No action.

Select Set completion status on and choose Inview or Click. By default, the Action Button component is set to Inview.

Select to Disable Button on Click. By default, this setting is set to Keep Active. Toggle to set this to Disable on Click.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.