GuidesReferenceChangelogVideosDiscord
Sign UpLogin

Button

Overview

The button control creates a button or text that when clicked can run Actions. This control differs from the Hyperlink 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 have a common set of styling properties.

organizing info

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 that make working with templates easier. Additionally it's important to understand how values with a variant of a theme. 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. 

  • default
  • buttonToggle
  • buttonStripe
  • buttonSecondary
  • buttonText
  • buttonSelection
  • link
organizing info  

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.  

  • 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

mceclip1.png

Example 1: Default Button

mceclip3.png

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

Example 2: Just text Button

mceclip4.png

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

In this example we have a Text Input 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

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

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

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 to check for empty and null values