Button

The Button control helps you easily design and customize buttons without the need for any other plugins or shortcodes.

Add Button to the page

Firstly, find the Button control in the controls add panel,. Then, drag and drop it into a section or container on your page.

Set contents of Button

Select content tab from the control's settings panel, and select button section:

1. Text: Enter the button’s text, or set the dynamic text with expression editor.
2. Tooltip: Set the text as the tooltip of this button. 
3. Alignment: Align the button to the left, center, right, or justified in relation to its column.
4. Size: Select the preset button sizes, from Extra Small to Extra Large (see padding default details at the bottom of this document)
5. Icon: Select a icon to display on the button
6. Position: Set the icon to appear before or after the button text
7. Space: Adjust the amount of space between the icon and the button text

Actions for button clicking

When the button is clicked, there are 2 options you can decide to use: Execute an action, or Set a URL as the button’s link. 

Execute an action

Select Action from the dropdown of the Execute Type. Then, bind a pre-defined action from the Action dropdown list, or create a new action. As an example, you can create an action call "Total Amount Check" with a confirm dialog step configured to show message if the total expense's value is greater than 1,000.

Then you select this action in your action dropdown list:

After it's set, when the user click the button on the form, this action will be called. The user will see a prompt dialog if the value of the total expense field is greater than 1,000.

You can set multiple steps in your action to execute more complex logics behind.

Link

Select Link from the dropdown of the Execute Type and set the URL for the button’s link. Click the cog to set the link to open in a new window.

Set Styles of Button

1. Typography: Change the default typography options for the button’s text
2. Text Shadow: Add a shadow and blur to the button’s text
3. Text Color: Select the color of the button’s text
4. Background Color: Select the button’s background color for both Normal, Hover and Click states. You may use a solid or gradient color
5. Border Type: Select the type of border to use around the button
6. Width: Control the thickness of the border around the button
7. Color: Choose the border’s color
8. Radius: Set the border radius to control corner roundness
9. Shadow: Set options to apply a box shadow on the button
10. Spacing: Change the padding settings of the button

Advanced Settings

Set the Advanced options that are applicable to this control.

Button Preset Sizes: Padding Defaults

Top, Left, Bottom, Right

• Extra Small: 10px, 20px, 10px, 20px
• Small: 12px, 24px, 12px, 24px
• Medium: 15px, 30px, 15px, 30px
• Large: 20px, 40px, 20px, 40px
• Extra Large: 25px, 50px, 25px, 50px