Label
Last updated
Last updated
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.
There are no interactive events for this control.
There are no data binding variables for this control.
Most Web Controls have a common set of styling properties.
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
Font specific options, if available such as "Regular" & "Bold".
Font size of the text. It can be specified as a theme variable, specific value (pt, rem, pixels) or dynamic Expression.
The color of the text. It can be specific as a theme variable, specific value (RGB, HEX) or dynamic Expression.
The text alignment within the Label's bounding box.
Additional treatment options such as italics & underlined.
Adjustable space between the rows of text beyond the default.
Adjustable space between letters beyond the default.
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.
Variants are preset styles for a given Web Control. Variants defined within the default theme are considered [best practices] (isempty.md) to easily share templates across applications.
Content
Heading
Default
Header
Assistive-text
Error-text
Form-field-label
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.
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.
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.
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.
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.
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.
In this example, we are selecting font color as defined in our Themes.
.gif)
