# Button

![](https://3821468174-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LrTlA1suFa5N48x_83N%2F-Md1NZPvHSa3XIUdK27q%2F-Md1O2Mi1DErLD2GpV_-%2FButton.PNG?alt=media\&token=c6c6ff08-ed6b-4a51-8047-f99fc0ffb922)

A Button is a clickable Control that can contain text. You can change the Button’s Text and Colors in runtime. A Button can interact with the user through its Events. You can use this Control to present the user a way to execute something in your application (a validation, a change of data, etc.).\
\
**Value -** Its value is the displayed **Text**.

For the control in question, when opening its properties, the following window appears: 

{% hint style="info" %}
Depending on the control chosen, the properties are different.
{% endhint %}

### Properties

![](https://3821468174-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LrTlA1suFa5N48x_83N%2F-MDYxcaa28CCTo8iMrpx%2F-MDYyOgZ5-RRWPrBu03-%2FButton_Menu.PNG?alt=media\&token=88e79785-80cf-444a-81cd-2235f4d01dcf)

### **Tab - General**

**Common** 

* **Name** - Name of the Control- This Name will be used to identify the Control throughout the Project. The name of the Control can only contain letters, digits or underscore (\_).
* **Text** - Text to be displayed in the Control
* **Description** - *Not applicable to this control.*
* **Plane** - Plane of the Form where the Control should be created. Check the [Planes ](https://doc.sysdevmobile.com/kalipso5/developing/form/option-window/planes)chapter for more information.
* **Visible** - With this option selected, the control is (or is not) visible.
* **Enabled** - With this option selected, the control is (or is not) enabled. It may be visible (previous option), but it may not be enabled. In this case an event associated with the control is not executed.

**Layout**

* **X** - x position of the Control from left
* **Y** - y position of the Control from top 
* **Width** - Width of the Control.  
* **Height** -  Height of the Control

{% hint style="info" %}
In relation to all these layout options, it is possible to set this value in runtime via the “[**Set Property**](https://doc.sysdevmobile.com/kalipso5/developing/form/actions/actions-description/group-controls/set-property)” Action. You can also retrieve this value in runtime via the “[**Get Property**](https://doc.sysdevmobile.com/kalipso5/developing/form/actions/actions-description/group-controls/get-property)” Action.
{% endhint %}

**Style**

***Appearance***

* **Background** - Background color of the Control. You can set the color for the background.
* **Opacity** - Set the percentage of opacity for the background.

{% hint style="info" %}
You can set this value is runtime via the “**Set Property**” Action. You can retrieve this value in runtime via the “**Get Property**” Action.
{% endhint %}

On the right side of the Style section, you can choose templates with pre-defined styles or configurable ones. By clicking on this option, the following style possibilities for the label appear:

* **Styles**
  * None
  * Base

***Text***

* **Font** – Font of the displayed Text
* **Size** – Font size of the displayed Text
* **Color -** Font color of the displayed Text
* **Properties** – Font properties of the displayed Text (bold, italic, underline)

{% hint style="warning" %}
Font color not applied in Desktop client due to Background Color being set to System Color
{% endhint %}

**Border**

* **Yes** - if you want to add a border to the button click this option.
* **No** - If you don't want to add a border to the button, click this option. By default, this option is enabled.

### Tab - Actions

![](https://3821468174-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LrTlA1suFa5N48x_83N%2F-MDZ19W0VnjoGn3wGC27%2F-MDZ1gF3R45SPzLei_zB%2FButton_Menu_Actions.PNG?alt=media\&token=3308499c-3aab-4091-b08b-0c122dafb6f7)

For each control, actions can be associated. For this, with the control selected, it is possible to access this tab and associate an action to the control. For more information on the actions available and how to use them click [**here**](https://doc.sysdevmobile.com/kalipso5/developing/form/option-window/actions).‌ 

#### Shortcuts <a href="#shortcuts" id="shortcuts"></a>

* F2 - Actions
* F3 - General Properties