# Button

## Overview

The button control creates a button or text that when clicked can run [Actions.](../studio/action-builder) This control differs from the [Hyperlink](hyperlink-web-control) control in that it does not allow for navigating outside of Airkit's Web Flows.

## Control Details

#### Control Properties

**Text**

The label that the user sees for the button.

#### Control Actions

**Clicked**

This event is fired when a user clicks the button.

#### Data Binding

There are no data binding variables for this control.

#### Styling

Most [Web Controls](web-controls-overview) have a [common set of styling properties](web-controls-overview/common-style-properties-of-web-controls).

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-c42b92b81392247ac09de2981b99ab48d9d97391%2Fbutton-web-control-v1715-0.gif?alt=media)

Notice that buttons can be in different shapes & sizes including just a plain text link as well.

#### Theming

Set the style of this Control quickly using [Themes and Variants](../studio/builder-bar/theme-builder) that make working with templates easier. Additionally it's important to understand how values with a [variant of a theme](https://docs.airkit.ai/?q=working-with-themes-and-control-variants). is inherited automatically unless they are specific as overrides.

**Default Theme Variants**

Variants are preset styles for a given web control and variants defined within the default theme are considered best practices to allow for easier sharing of templates across applications.&#x20;

* default
* buttonToggle
* buttonStripe
* buttonSecondary
* buttonText
* buttonSelection
* link

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-ab0d5f23495dc763f1dedcb10743db57f4677d67%2Fbutton-web-control-v1715-1.png?alt=media) &#x20;

**Available Control States**

Control states are available on some controls that allow setting different style values depending on the state of a control.  For example a button or a text input could be disabled or enabled. &#x20;

* **default** - this is the state if the button is enabled and not being interacted with
* **pressed** - this is the state when the button is temporarily depressed by the user
* **disabled** - used if the Is Disabled property is true
* **focused** - used if the control is focused with the tab key or with accessibility commands

![](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-9e9d89db915381b5d1ce28e7bf90b0c5744f7fbb%2Fbutton-web-control-v1715-2.png?alt=media)

#### Example 1: Default Button

![](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-417fd52ad8d250f9e285f63ddcab4f9b8d99754c%2Fbutton-web-control-v1715-3.png?alt=media)

In this example, we have a button with the default style displaying the static text "Click Me"

#### Example 2: Just text Button

![](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-88573480ec03572a0eea1963bbcb538a447dca5f%2Fbutton-web-control-v1715-4.png?alt=media)

In this example, we've just changed the style to "buttonText" in the default theme as a preset to show how it's easy to make a just text button using styling.

#### Example 3: Disabled unless valid

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-277c57709c26c39e014d9463dcd327b50b5ac8b6%2Fbutton-web-control-v1715-5.gif?alt=media)

In this example we have a [Text Input](text-input-web-control) control that is bound to the variable **first\_name** and we're making the button either enabled or disabled based on whether a value has been entered into the text field.

To do this, we're taking advantage of the **Is Disabled** property that is under the Advanced options and using the simple Airscript expression to check if there's a value.

**Is Disabled**

```javascript
ISEMPTY(  
  first_name  
)
```

* if `first_name` is empty then Is Disabled = TRUE
* if `first_name` has a value then Is Disabled = FALSE

#### Example 4: Hidden unless valid

![organizing info](https://a01-support.airkit.com/button-web-control/button%20-%20is%20visible.gif)

In this example we also have a Text Input Control that is bound to the variable **first\_name**; however, we're making the button either visible or invisible based on whether a value has been entered into the text field.

To do this, we're taking advantage of the **Is Visible** property that is under the Advanced options and using the simple Airscript expression to check if there's a value.

**Is Visible**

```javascript
ISNOTEMPTY(  
  first_name  
)
```

* if `first_name` is empty then Is Visible = FALSE
* if `first_name` has a value then Is Visible = TRUE

See more [useful tips and functions](../airscript/working-with-missing-values) to check for empty and null values
