# Button
## Overview
This guide will show how to use buttons in your applications. See how easy it is to drag and drop buttons onto your forms and connect them to your business logic. Buttons can be modified, styled and even changed at runtime.
To see a live sample of the component you can go [here](https://samples-dev.samples.servoy-cloud.eu/solution/components?a=button).
## Get Started
In the [Form Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/form-editor), drag the Button component from the Pallet onto the form
Add Button
{% hint style="info" %}
If the component does not appear in the pallet, it means you do not have the Bootstrap Components package installed. Click "Get more components" at the top of the pallet to open the [Servoy Package Manager](https://github.com/Servoy/gitbook/blob/master/reference/servoy-developer/object-editors/package-manager.md) and install it.
{% endhint %}
## Modifying a Button at Design-Time
Buttons, like all components, have properties which can be modified at design-time to set the appearance and behavior of the component. Select the button in the [Form Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/form-editor) to see a list of properties in the [Component Properties Editor](https://docs.servoy.com/reference/servoy-developer/views/properties#properties). Below are some common properties and how to set them at design-time.
{% hint style="info" %}
See the reference docs for [Button](https://docs.servoy.com/reference/servoyextensions/ui-components/buttons-and-text/button) for a complete list of its [properties](https://docs.servoy.com/reference/servoyextensions/ui-components/buttons-and-text/button#properties-summary).
{% endhint %}
### Setting the Text
The text displayed on a button can be modified by setting its [`text`](https://docs.servoy.com/reference/servoyextensions/ui-components/buttons-and-text/button#text) property. Most often, this will just be plain text, such as "Submit" or "Cancel". In this case, just enter the value into the editor or directly on the component by double-clicking it. For more options open the [Text Property Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/text-property-editor).
### Setting a Tooltip message
Buttons, like many components, can display tooltip messages when a user hovers their cursor. Most often, this will just be plain text that describes what will happen on-click. In this case, just enter the value into the editor. For more options open the [Text Property Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/text-property-editor).
{% hint style="info" %}
Remember that text can also be dynamic, data-driven or localized. For more options, you can open edit the text property in the [Text Property Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/text-property-editor).
{% endhint %}
### Setting an Image / Font-Icon
Many times, a button will be decorated with an image or font icon. To add an image to your button, edit the [`imageStyleClass`](https://docs.servoy.com/reference/servoyextensions/ui-components/buttons-and-text/button#imagestyleclass) property and choose the image style class of the font icon you wish to use. For example, enter a value of `fa fa-user-plus` to get a nice "Save" icon.
For more information, please see the [Font Icon](https://docs.servoy.com/guides/develop/application-design/styling-and-themes/font-icons) section of the guide on [Styling and Themes](https://docs.servoy.com/guides/develop/application-design/styling-and-themes).
### Styling
Like all components, a Button has a button can be styled using themes, variants and raw CSS. To apply any available style class, simply enter one or more space-delimited values for the `styleClass` property.
For example, `styleClass="btn btn-default"`
#### Button Variants
If you are using Variants, then you can easily drag and drop variations of your button onto your form.
Button Variant being dropped on a form
## Handling Events
Like most components, Buttons have events, which allow you to execute some logic when something happens in the UI. Of course, the most common event for a button is the `onAction` event, which is triggered when the button is clicked or the user hits the `Enter` key while the button has focus.
To Handle the event, double-click the value for the `onAction` property in the [Properties Editor](https://github.com/Servoy/gitbook/blob/master/reference/servoy-developer/views/component-properties-editor.md). You will see the [Method Selection Wizard](https://docs.servoy.com/reference/servoy-developer/object-editors/method-selection-wizard). You'll have the option select an existing Method or create a new Method. The method will be called when the button's `onAction` event is fired and the [Event](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent) object will be passed to it.
Create a method t handle the onAction event
```javascript
/**
* @param {JSEvent} event
*
* @properties={typeid:24,uuid:"A74C281C-00AA-46AA-BB38-500C937F2D1A"}
*/
function onAction(event) {
// Enter custom code
}
```
{% hint style="info" %}
See the [Button reference](https://docs.servoy.com/reference/servoyextensions/ui-components/buttons-and-text/button) for comprehensive list of [all events](https://docs.servoy.com/reference/servoyextensions/ui-components/buttons-and-text/button#events-summary)
{% endhint %}
## Modifying a Button at Runtime
Buttons, like many components, can be modified at runtime through code. Below are a few examples of controlling a Button from code.
### Enabling / Disabling a button
You can easily change the `enabled` state of a Button at runtime.
```javascript
function disableButton(){
elements.myButton.enabled = false;
}
```
### Hiding/Showing a Button
You can easily change the `visible` state of a Button at runtime.
```javascript
function hideButton(){
elements.myButton.visible = false;
}
```
## Calling Button API Methods
Like most components, a Button has API methods which can be called from code. Below is an example of common API calls.
### Give Keyboard Focus
You can easily give keyboard focus to a button using the [`requestFocus`](https://docs.servoy.com/reference/servoyextensions/ui-components/buttons-and-text/button#requestfocus) method.
```javascript
function focusButton(){
elements.myButton.requestFocus();
}
```
### Add CSS Style Class
You can easily add a style class to a button using the [`addStyleClass`](https://docs.servoy.com/reference/servoyextensions/ui-components/buttons-and-text/button#addstyleclass) method.
```javascript
function AddStyleClassButton(){
elements.myButton.addStyleClass('mycssclass');
}
```
{% hint style="info" %}
See the [Button Reference Docs](https://docs.servoy.com/reference/servoyextensions/ui-components/buttons-and-text/button) for a complete list of programmable [properties](https://docs.servoy.com/reference/servoyextensions/ui-components/buttons-and-text/button#properties-summary) and [methods](https://docs.servoy.com/reference/servoyextensions/ui-components/buttons-and-text/button#methods-summary).
{% endhint %}
## Related Articles
The following articles are recommended for additional reading:
* [Button Reference Documentation](https://docs.servoy.com/reference/servoyextensions/ui-components/buttons-and-text/button)
* [Styling and Themes](https://docs.servoy.com/guides/develop/application-design/styling-and-themes)
* [Scripting the UI](https://docs.servoy.com/guides/develop/programming-guide/scripting-the-ui)
.gif?alt=media)
.gif?alt=media)