This article explains the settings available for the button element and how to use them effectively within your module.
A button is used to trigger an action when a user selects it. In a module, buttons can take the user to another page, open a link, show or hide content, open a popup, mark a module as complete, and more.
Adding or editing a button
To add or edit a button within a module:
Find and open the module you want to edit
Select Edit content on the right side of the page
Select the page where you want to add or edit the button
Use the element dropdown to add a button, or select Edit on an existing button
Button Element Settings
Setting | Description |
Button text | The text displayed on the button. |
Aria-label | A concise description for screen readers, used when the button has only an image and no text. |
Aria-role | Set to link when using Link or Document features. Default role is button. |
Width | Defines button width. Leave empty to auto-size to content. |
Link | A link that opens in a new tab or window depending on the user's browser settings. |
Document (linked resources) | Select a linked resource to open when the button is selected. Opens in a new tab or window. |
Class name | Default styling class (custombtn). Leave unchanged. |
Class name clicked | Adds a class after the button is selected. Leave blank to keep default styling. |
Text align | Aligns button text to left, centre, or right. |
Button shadow | Adds a shadow to the button. Leave empty for none. |
Text size (px) | Size of the button text. |
Text color | Colour of the button text. |
Text background color | Used when adding a background to text, especially with image buttons. |
Text background opacity | Transparency level of the text background colour. |
IMG upload | Upload a button image. |
IMG SRC | Automatically generated path of the uploaded image. Can be reused in other elements. |
IMG class name | Default class (responsive). Leave unchanged. |
Text position | Places text above, below, or over the image. |
Padding-top (px) | Adjusts the gap between text and image depending on chosen layout. |
Padding-bottom (px) | Adjusts the gap between text and image depending on chosen layout. |
Preserve state | Saves the button’s state when users revisit the page. |
Disable after click | Button can be selected only once. Use with Preserve state. |
Mark module as completed | Marks the module complete. Use with Preserve state. |
Close module | Closes the module when selected. |
Next button action | Shows or hides the next/continue button or directs it to an identified page or section. |
Show next delay | Delays appearance of the next/continue button (e.g., 1000 = 1 second). |
Go to page | Sends the user to the next or a specific identified page or section. |
Add element | Shows elements after selection. Requires identifiers. Use with Preserve state if persistent. |
Remove element | Hides elements after selection. Requires identifiers. Use with Preserve state if persistent. |
Entry | Animation type for added elements (0–6). |
Delay | Animation delay for added elements (e.g., 1000 = 1 second). |
Add objective | Used for intelligent learning. Use with Preserve state. |
Remove objective | Used for intelligent learning. Use with Preserve state. |
Set data variable | Writes a variable name to session data during assessment completion. |
Set data value | Writes a corresponding value to session data. |
Download PDF | Select an identified text element to download as a PDF. |
Focus on | Moves focus to a specific identified element on selection. |
Scroll to next section | Moves the user to the next scrolling section (scrolling skin only). |
Print certificate | Opens a printable completion or score certificate. Should be placed at the end of a module. |
Confirmation pop-up | Opens a confirmation popup when set to yes. |
Pop-up title | Title text of the popup. |
Pop-up body | Body content of the popup. |
Pop-up option 1 | Confirmation action that closes the popup and triggers set button actions. |
Pop-up option 2 | Cancel action that closes the popup. |
Width | Width of the popup. |
Controls position | Positions the popup action buttons. |
Conclusion
If you have completed all module changes, please refer to the article titled What do I do when I finish creating or editing my module?
If you believe you have incorrect permissions, please contact your company admin or Customer Success Manager.
If you need further support, contact your Customer Success Manager by selecting Send us a message via the help icon on your portal, or by emailing [email protected].