Overview

The Label Control is one of the most common Controls used to display text to a user. Edit a Label by double-clicking and typing the desired text.  Labels also accept unicode to add emojis or symbols.

Control Details

Behaviors & Interactions

There are no interactive events for this control.

Data Binding

There are no data binding variables for this control.

Styling

Most Web Controls have a common set of styling properties.

Font - The font to use for the Label:

• It can be specified as a Theme variable

• It can be selected from Google Web Fonts

• It can be a custom uploaded font

• It can be a dynamic Expression

Weight

Font specific options, if available such as "Regular" & "Bold".

Size

Font size of the text. It can be specified as a theme variable, specific value (pt, rem, pixels) or dynamic Expression.

Color

The color of the text. It can be specific as a theme variable, specific value (RGB, HEX) or dynamic Expression.

Text-Alignment

The text alignment within the Label's bounding box.

Text-Style

Additional treatment options such as italics & underlined. 

Line Height

Adjustable space between the rows of text beyond the default.

Letter Spacing

Adjustable space between letters beyond the default.

Theming

Set the style of this Control quickly using Themes. Additionally it's important to understand how values with variants of a theme are inherited automatically unless they are specific as overrides.

Default Theme Variants

Variants are preset styles for a given Web Control. Variants defined within the default theme are considered [best practices] (https://support.airkit.com/reference/isempty) to easily share templates across applications. 

• Content
• Heading
• Default
• Header
• Assistive-text
• Error-text
• Form-field-label

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.  

This control does not have any available control states.

Examples

Example 1: Editing a Label on Stage

Another way you can edit the Label is by using the Inspector instead of directly on the element itself. Simply navigate to General > Control Properties and click on the text field to begin editing - your cursor will change to indicate that the field is editable. 

Example 2: Editing a Label from the Inspector section

Example 3: Personalized Label

In order to make a label change based on a variable you must edit the Expression for the text of the label.  Here's an example where we personalize a greeting by inserting the text variable firstName into the text using the {{ }} inside of a string to evaluation Airscript.

Example 4:  Conditionally Personalized Label

In real-world scenarios you might not have a value for firstName so you can create a simple conditional using IF() and ISEMPTY() to check if there's a name and change the label accordingly.

Example 5: Selecting text Variants from the Inspector

In this example, the font size of the Label is quickly chnaged using the largeHeadline Variant. Additionally it's important to understand how values with variants of a theme are inherited automatically unless they are specific as overrides. For more information, see best practices of defining theme variants that make working with templates easier.

Example 6: Simply editing text styling on each Label from the Inspector

To change font styles of an element, after selecting the element, navigate to General > Font within the Inspector where you can change the font type, positioning and colors.  By default, the App's theme colors will be easily accessible under the Theme tab.

Example 7: Selecting text colors from the Inspector

In this example, we are selecting font color as defined in our Themes.