Skip to main content

Button Overview

  1. The "ID" is a static attribute of the button (that means that its value cannot be changed dynamically with a UiSet command) used to change OTHER button attributes values dynamically

  1. The "Comment" is another static attribute that specifies a comment visible only in the "Project Editor". It is used to add a note or a tag to a button

  1. It is visible here in the "SELECT" panel

  1. The "Position" attributes specifies the button's left/top coordinates in pixels

  1. The "Size" attributes specifies the button's "Width" and "Height" in pixels

6. The "Style" attribute specifies the button style and color. The default value is "gray"

  1. As you can see the button is now blue

  1. The "Label" specifies a string to be displayed as the Label

  1. The "Description" attribute specifies a description displayed below the "Label"

  1. The "Tooltip" attribute specifies a text displayed when hovering over the object

13. The "Icon" attribute specifies an icon to display. Its position can be changed with the "Icon Position" attribute (left (default), top, center, background)

15. The "Secondary Icon" specifies a secondary icon to display. Its position depends on the "Icon Position" attribute, like the "Icon" before

16. The "Action" attribute specifies the action performed when clicked/tapped. We'll go in detail later in the turorial

17. The "Indicator" shows an element in the top right corner, useful for notification. We can change the Label, Icon and Color

  1. The "Font Family" specifies the font family from the following:

  1. The "Font Size" specifies the font size in pixels or percentage (relative to project font size)

  1. The "Font Color" specifies the font CSS color

  1. The "Font Weight" specifies the weight of the font from the following:

  1. The "Italic" checkbox shows the text in italic

  1. The "Small Caps" checkbox sets the font to small caps

25. The "Text Align" sets the horizontal alignment of the text. It can be none (default, no alignment), left, right, center, justify

  1. The "Visible" checkbox sets the object visibility (visible or hidden)

27. The "Enabled" checkbox specifies if the object is enabled or not. A disabled object appears as grayed out and can't be interacted with

  1. The "Blink" attribute blinks the object at a specified speed (slow or fast)

29. The "Opacity" attribute sets the opacity of the button. The opacity is the degree to which content behind an object is hidden

30. The "Rotation" attribute specifies the degree by which the object is rotated. A positive number rotates it clock-wise, a negative number counter-clockwise

31. The "CSS Class" attribute specifies a CSS Class that applies to the object, useful to customize its appearance. Custom CSS Classes are specified within the Custom.css file