Button

Button is the Design Element that is able to receive taps, and trigger event actions at its On Click event.
Tip: If you need to add Event Actions to a Group of Design Elements, you should use Tappable View.

Button States

A button can have a different design based on its state.

Available States

• Normal State: The normal or default state. The button is enabled but neither selected nor highlighted.
• Highlighted State: This state occurs when the user touches the button.
• Selected State: To set this state, enable the Selected property or use Code Blocks.
• Disabled State: The button is disabled and cannot be tapped by the user. To set this state to the button, disable the Enabled property or use Code Blocks.

Each State properties

Title

The button’s title at the currently editing state.

Title Color

The button’s title color at the currently editing state.

Image Asset

The button’s image asset at the currently editing state. It will be displayed next to the title, if there is one. If not, it will be placed in the center of the button.

Background Image Asset

The button’s background image asset at the currently editing state. It will be displayed behind the title and the image asset of the button. It will fill the button’s bounds.

Background Color

The button’s background color at the currently editing state.

Button

Font

The font of the button’s title.

Selected

Indicates whether the button is in the selected state.

Shows Touch When Highlighted

If enabled, the button glows when tapped; otherwise, it does not. The glow does not change the image and button style.
Default value: false.

Adjusts Image When Disabled

Indicates whether the image changes when the button is disabled.

Adjusts Image When Highlighted

If enabled, the image is displayed with a lighter color when the button is highlighted.
Default value: true.

Enabled

Indicates whether the control is enabled.

View

Alpha

Alpha is a number that alters the transparency of the button. It ranges between 0.0 and 1.0, where 0.0 makes the button totally transparent and 1.0 entirely opaque.
Default value: 1.0

User Interaction Enabled

User Interaction Enabled indicates whether the user can tap the button.

Hidden

If enabled, it hides the button.

Masks to Bounds

Masks to Bounds indicates whether the content of the button will be wrapped around its bounds.

Border

Border Color

The color of the border.

Border Width

The width of the border.
Default value: 0

Corner radius

The radius of the corners. Tip: Enable Masks to Bounds for the button content to be clipped to the rounded corners.
Default value: 0

Shadow

Shadow Color

The color of the shadow.
Tip: You can add opacity/alpha to the Shadow Color in order to add transparency to the shadow.

Shadow Blur

The blur radius used to render the shadow.

Shadow X Offset

The horizontal offset of the shadow.

Shadow Y Offset

The vertical offset of the shadow.

Code

Display Name

You can use this text to identify the Button in the Code Blocks Editor and in the List of the Screen’s elements. It is not visible to the users.

Visible In Code

It makes the Button visible in the Code Blocks Editor in order to connect it to other Code Blocks.