# Button

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-947860b1b3505e4952d396017ba30db65992ab26%2Fbutton-web-control-v184-0.png?alt=media)

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

## Properties

### General

#### Text

Expects type `text`.

The text that is displayed on the Button.

### Accessibility

#### Aria Label

Expects type `text`.

Defines a value to the aria-label of the control for accessibility. For more information see [here](https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html).

### State

#### Is Visible

Expects type `boolean`.

If `TRUE` the button will be visible. If `FALSE` the button will not be displayed. If the field is empty, the button will be visible.

#### Is Disabled

Expects type `boolean`.

If `TRUE` the button will be disabled and the user will not be able to interact with the control. If `FALSE` the button will be enabled. If the field is empty, the button will be enabled.

## Style

The Button Variants have styles for the following states:

**Default** - When first rendered without state\
**Pressed** - when the Button is being pressed\
**Disabled** - When the Button is disabled\
**Focused** - when the Button is focused

If the Text on the Button is a phrase, it can be adjusted to one or multiple lines from \*\* Override Styles > Text Overflow\*\*

Check [Common style properties of web controls](../styling/styling-overview/web-control-styling-properties) for further details on how to style your Button Web Control.

## Actions

#### Clicked

This event is run each time the button is clicked.

Metadata about this event can be accessed through the `event` namespace.

## Example #1

This example shows a Button with the default style displaying the static text "Click Me".

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-94ca849a2c9a75bf3d60b2e732059a8932f8f539%2Fbutton-web-control-v184-1.png?alt=media)

## Example #3

This example shows a [Text Input](text-input-web-control) Control that is bound to the variable `first_name` and the button is either enabled or disabled based on whether a value has been entered into the text field.

To do this, use the **Is Disabled** property with an Airscript expression to check if there's a value.

```javascript
ISEMPTY(  
  first_name  
)
```

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

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-ac176a732be841f6913aeeb54e9d196f2f3cb009%2Fbutton-web-control-v184-2.png?alt=media)

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