Action Button Component
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.
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
Follow these steps to add the Action Button component to a Block:
- Click Add Component.
- Use the component search or scroll to find the Action Button component.
- Click the Action Button component and select Add Left, Add Full or Add Right.
Click the Edit Component icon on the newly added Action Button component to begin set up.
In the General section, add Action Button Title, or an Action Button Display Title, as needed. Action Button Display Title is seen by learners.
Scroll down and add your Action Button Body. Use the text editor to style and format your text, as needed.
- Add Action Button Instruction Text that tells users how to use the component.
- 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 that 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.
- In the Button section, you add Button Text for your Action Button component.
- Add a Button Aria Label for screen readers, as needed.
- 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.
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.
- 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 .
- Set Button Icon Size (px) as needed.
- Set Button Image Position, as needed. By default, this is set to Top.
- Finally, in the Appearance section, you toggle to enable Show Pulse Animation for the Action Button component. By default, Show Pulse Animation is disabled.
In the Behaviour 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:
- No action
- Scroll to the top of the page
- Restart course
- Reset Assessment
- Exit Bloom course
- Exit Exceed course
- Download Certificate
- Download Reflection
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.
Finally in the Behaviour section, select to Disable Button on Click. By default, this setting is set to Keep Active. Toggle to set this to Disable Button on Click.
Did this article help?
Let us know by leaving a star rating or review at the top of this article.