Button

A button is a control that the user can click to perform an action.

Buttons can have icons, labels, and tooltips.

They can be styled with several attributes that change their color, shape, and look.

Attributes

Common

ID

Sets the object's ID.

The ID identifies the object and is used to reference it in UISet actions, allowing to change its attributes dynamically.

The ID is not unique, it can be shared among multiple objects to quickly change a common attribute.

IDs can't be changed with a UISet action, but they can have a Value Binding assigned to them. Value Bindings on IDs allow an object to be dynamically attached to a set of attribute values.

E.g. the following Value Binding switches the ID of the object between mybutton1 and mybutton2 based on the value of the UISet button.address:

Value binding:

"mybutton" + ui('button', 'address')

UISet:

UISet('button', 'address', '1') switches the ID to mybutton1

UISet('button', 'address', '2') switches the ID to mybutton2

Position and Size

Position

Sets the object's position.

Attribute Values

Value	Description	Example
x<left>y<top>	Specify left/top coordinates in pixels.	x10y20

This attribute is available when parent's layout is neither "flex" nor "grid".

When parent's layout is neither "flex" nor "grid", this attribute defaults to x0y0.

Flex Grow

Specifies if the objects should grow to fill the available space.

Attribute Values

Value	Description
false	Default value. Objects do not grow to fill the available space.
true	Objects expand to fill the available space.

This attribute is available when parent's layout is "flex".

The default value is: false.

Flex Shrink

Specifies if the objects should shrink to fit the available space.

Attribute Values

Value	Description
false	Default value. Objects do not shrink to fit the available space.
true	Objects shrink to fit the available space.

This attribute is available when parent's layout is "flex".

The default value is: false.

Column

Specifies the starting column of the object inside a grid container.

Minimum value is 1.

Attribute Values

Value	Description
<int>	Column index starting from 1.

This attribute is available when parent's layout is "grid".

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Column Span

Specifies how many grid columns the object spans.

Minimum value is 1.

Attribute Values

Value	Description
<int>	Column span starting from 1.

This attribute is available when parent's layout is "grid".

When parent's layout is "grid", this attribute defaults to 1.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Row

Specifies the starting row of the object inside a grid container.

Minimum value is 1.

Attribute Values

Value	Description
[empty]	Auto placement by the grid.
<int>	Row index starting from 1.

This attribute is available when parent's layout is "grid".

When parent's layout is "grid", this attribute defaults to auto.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Row Span

Specifies how many grid rows the object spans.

Minimum value is 1.

Attribute Values

Value	Description
<int>	Row span starting from 1.

This attribute is available when parent's layout is "grid".

When parent's layout is "grid", this attribute defaults to 1.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Width

Sets the object's width in pixels.

Minimum value is 24.

Height

Sets the object's height in pixels.

Minimum value is 24.

Action

Action

Specifies the action performed when clicked/tapped.

Attribute Values

Value	Description
[empty]	Default value. No action.
link	Changes page, shows a popup or opens a URL.
command	Sends a command to the server, with the specified name and parameter. See the Command API.
datapoint	Toggles a datapoint.
download	Fires a download file request that generates a specific command. A server-side userCommand script must intercept the command. If the content to be downloaded is an existing file, it should return a full pathname of the file to be downloaded, or a JSON object such as {"path":"pathname", "filename":"filename", "delete":true}, where path is the full pathname of the file to be downloaded and filename is the name of the file to be saved on the client. Delete is optional. When present and set to true, the file is deleted as soon as the download is initiated from the client. If the returned pathname is a valid and accessible file under the HSYCO main directory, the download will be initiated. It is also possible to generate the binary content to be downloaded directly from the userCommand script. In this case userCommand should return a JSON object like {"data":"&amp;<Base64-encoded data&amp;>", "filename":"filename"} where data is a Base64-encoded string of the binary data to be downloaded. See Handling a download request.
upload	Shows the upload file popup. A server-side uiSet (not a scope uiSet) must be executed to allow the upload and specify the upload path: uiSet("<object ID>", "path", "<upload path>") * name: the object ID * upload path: the path where the uploaded files are saved, relative to the HSYCO main directory When the upload is completed, a command is generated with: * name: the object ID * parameter: the uploaded file name, including the extension.
submit	Sends the values of all the fields within the button's container to the server. If not in a container, it submits all fields from the page. In overlay pages, if the button is not inside a container, it submits fields from the current page as well. Fields inside nested containers are included in the submissions. When submitting, if a field is not valid, it will be focused and the action will be canceled. While waiting for the server response, the submitted fields and submission controls are disabled and the button displays a loader.
timer	Opens a timer's details.
tab	Shows a specified container and hides the other of the same group.
camera-link	Opens a page with the specified camera address.
docs-link	Opens the documentation page with the specified root and path.
slider	Opens a slider popup.
menu	Opens a popup menu.
logout	Immediately logs out the user.
clipboard-copy	Copies the specified text to the clipboard.
coordinates	Sends a command to the server, with the specified name and the cursor position as parameter (x,y).
ai-assistant	Opens the AI assistant chat.

Link

Specifies a page, navigation command or external URL to follow.

Attribute Values

Value	Description	Example
<Page ID>	The page ID.
<URL>	A url starting with "http://", "https://", "ftp://" or "www.".
back	Navigate backward in browsing history.
forward	Navigate forward in browsing history.
close	Closes the last opened popup.
close-all	Closes all open popups.
logout	Opens the logout popup.
adminclock	Opens the admin clock page, where the user can set the system time.
adminpwd	Opens the admin password page, where the user can change its puk or password.
adminusers	Opens the admin users page, where the user can manage users and groups.
<comma-separated list>	Consequently opens a list of links. Useful for example to open multiple modals in sequence, or to open a page and then a popup.	close-all,mymodal

This attribute is available when action is "link".

Link Target

Specifies where to open the linked URL. Available only for URL links.

Attribute Values

Value	Description
_self	Default value. Opens the linked URL in the same window or tab.
_blank	Opens the linked URL in a new window or tab.
<string>	Opens the linked URL in a named window or tab. Use this to open multiple links in the same window or tab.

This attribute is available when action is link and link is a valid URL or path.

When action is link and link is a valid URL or path, this attribute defaults to _self.

Datapoint

Specifies a datapoint, to display and control its status.

Attribute Values

Value	Description	Example
[datapoint address]	The datapoint address.	dummy.dimmer.1

This attribute is available when action is "datapoint".

Name

Specifies the command name that is sent to the server.

If the name starts with $, then the server will automatically set a variable with the same name as the command, containing the command's parameter.

Attribute Values

Value	Description	Example
<string>	A command name.
$[variable name]	A command name that sets a variable.	$myvar
$[variable name]!	A command name that sets a persistent variable.	$myvar!

This attribute is available when action is one of "command", "download", "submit", or "coordinates".

When action is one of "command", "download", "submit", or "coordinates", this attribute defaults to the id attribute.

Parameter

Specifies the command parameter that is sent to the server.

Attribute Values

Value	Description
<string>	A command parameter.

This attribute is available when action is one of "command" or "download".

Repeat

If enabled, the command will be repeated every second. Instead of a single command on the button press event, multiple commands are sent with the same command name and these suffixes added to the command parameter:

• <command parameter>/down: on mouse down or touch down events
• <command parameter>/repeat/<n>: if the button is still pressed, a repeat command is sent every second, where <n> counts the repeats from 1
• <command parameter>/up: on mouse up or touch up events, for a short press (less than a second, so no repeat commands have been sent yet)
• <command parameter>/stop: on mouse up or touch up events, for a long press (more than a second, so at least a repeat command has been sent)

With an empty command parameter, the parameter is the suffix alone, such as /down.

Attribute Values

Value	Description
false	Default value. Repeat mode is disabled.
true	Repeat mode is enabled.

This attribute is available when action is "command".

The default value is: false.

Path

Specifies the path where uploaded files are saved. If this attribute is not set, the upload has no effect (no files saved on the server).

For security reasons, this UISET must be executed on the server-side code (EVENTS, JavaScript or Java). A client-side UISET would be ignored.

Attribute Values

Value	Description	Example
<string>	Path.	.tmp

This attribute is available when action is "upload".

note

This attribute is live. It can't be set from the Project Editor, it needs to be set dynamically with a UISet.

Multiple

Specifies wether multiple files can be selected.

Attribute Values

Value	Description
false	Default value. Single file selection.
true	Multiple file selection.

This attribute is available when action is "upload".

The default value is: false.

Accept

Specifies the types of files that the server accepts.

Attribute Values

Value	Description	Example
[empty]	No restrictions.
<comma-separated list>	File extensions.	.jpg,.png,.gif

This attribute is available when action is "upload".

When action is "upload", this attribute defaults to [any].

Preview

Specifies wether a preview step is displayed.

Attribute Values

Value	Description
false	Default value. No preview.
true	Preview.

This attribute is available when action is "upload".

The default value is: false.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Clipboard Text

Specifies the text to be copied to the clipboard.

Attribute Values

Value	Description
<string>	The text to be copied.

This attribute is available when action is "clipboard-copy".

Profile

Specifies the AI profile to use for the chat.

Attribute Values

Value	Description	Example
<profile id>	A configured AI profile ID.	support-assistant

This attribute is available when action is "ai-assistant".

Model

Specifies which model tiers the chat can use.

Attribute Values

Value	Description
base	Allows the base model tier.
advanced	Default value. Allows the advanced model tier.

This attribute is available when action is "ai-assistant".

When action is "ai-assistant", this attribute defaults to advanced.

Live Mode

Enables Live voice controls when the selected profile supports Live.

Attribute Values

Value	Description
false	False.
true	Default value. True.

This attribute is available when action is "ai-assistant".

When action is "ai-assistant", this attribute defaults to true.

Camera

Specifies a camera, to display its live video stream.

Attribute Values

Value	Description	Example
<camera address>	The camera address.	dummy.camera.1

This attribute is available when action is "camera-link".

Target Camera

Specifies a target camera object, to display the camera live video stream.

Attribute Values

Value	Description	Example
<Container ID>	The container object's ID.	mycontainer

This attribute is available when action is "camera-link".

Docs Target

Specifies a target docs object, to display the documentation.

If not specified, a default docs object is displayed in a popup.

Attribute Values

Value	Description	Example
default	Default value. The documentation is displayed in a popup.
<Docs ID>	The docs object's ID.	mydocs

This attribute is available when action is "docs-link".

When action is "docs-link", this attribute defaults to default.

Doc Type

Specifies the type of documentation.

Attribute Values

Value	Description
project	Default value. Project documentation.
hsyco	HSYCO documentation.
projects	All projects documentation.
objects	Custom objects documentation.

This attribute is available when action is "docs-link".

The default value is: project.

Docs Root Path

Root path of the documentation.

If left empty it loads all the project documentation.

If a path is specified it loads the documentation from that path.

The path is relative to the project docs directory: www/projects/<project id>/docs.

The contents of the docs directory are merged with the common docs directory: www/docs.

The common docs should include documentation that is shared among multiple projects, while project-specific docs should be placed in the project's docs directory.

Attribute Values

Value	Description	Example
<string>	Path.	my/sub/dir

This attribute is available when action is "docs-link".

Docs Path

Current path of the docs file displayed, following the same directory structure as the root path.

Can contain an anchor to a specific section of the document, using the format path#anchor.

Each heading in the document has an anchor with an id equal to the heading text in lowercase, with no spaces. E.g. My Heading becomes #myheading.

Attribute Values

Value	Description	Example
<string>	Path.	projects/home

This attribute is available when action is "docs-link".

Index

Specifies wether the index is displayed.

Attribute Values

Value	Description
true	Visible.
false	Hidden.
toggle	Default value. User can toggle visibility.
toggle-false	User can toggle visibility, but it's hidden by default.

This attribute is available when action is "docs-link".

When action is "docs-link", this attribute defaults to toggle.

TOC

Specifies wether the table of contents is displayed.

Attribute Values

Value	Description
true	Visible.
false	Hidden.
toggle	Default value. User can toggle visibility.
toggle-false	User can toggle visibility, but it's hidden by default.

This attribute is available when action is "docs-link".

When action is "docs-link", this attribute defaults to toggle.

Breadcrumbs

Specifies wether the breadcrumbs are displayed.

Attribute Values

Value	Description
false	Hidden.
true	Default value. Visible.

This attribute is available when action is "docs-link".

When action is "docs-link", this attribute defaults to true.

Timer

Specifies a timer, to display its details and command it.

Attribute Values

Value	Description	Example
<timer address>	The timer address.	dummy.timer.1

This attribute is available when action is "timer".

Target Container

Specifies a target container, to display its content.

Attribute Values

Value	Description	Example
<container ID>	The container ID.	dummy.container.1

This attribute is available when action is "tab".

Tab Group

Specifies the tab group to which the tab belongs.

Attribute Values

Value	Description
<string>	The tab group name.

This attribute is available when action is "tab".

Slider Action

Specifies the action to perform when the slider is moved.

Attribute Values

Value	Description
none	Default value. No action.
command	Sends a command.
datapoint	Sets a datapoint value.

This attribute is available when action is "slider".

The default value is: none.

Set Value

Specifies the value to set the datapoint to.

Attribute Values

Value	Description
flip	Default value. Toggles the datapoint value.
<string>	The value to set.

This attribute is available when action is "datapoint" and device type of datapoint is not "DIMMER".

When action is "datapoint" and device type of datapoint is not "DIMMER", this attribute defaults to flip.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

On Value

Specifies the value sent when toggling the datapoint on. Use flip to restore the last value when turning on. Use a number to always set a fixed value when turning on.

Attribute Values

Value	Description
flip	Default value. Toggles between off (0) and the previous on value.
<number>	Toggles between off (0) and this specific value.

This attribute is available when action is "datapoint" and device type of datapoint is "DIMMER".

When action is "datapoint" and device type of datapoint is "DIMMER", this attribute defaults to flip.

Slider Name

Specifies the name of the command.

Attribute Values

Value	Description
<string>	Command name.

This attribute is available when slideraction is "command" and action is "slider".

When slideraction is "command" and action is "slider", this attribute defaults to the id attribute.

Slider Value

Specifies the slider value. Leave empty to use the minimum of Range.

Attribute Values

Value	Description
<string>	Value.

This attribute is available when slideraction is "command" and action is "slider".

Slider Datapoint

Specifies the datapoint.

Attribute Values

Value	Description
<datapoint>	Datapoint.

This attribute is available when slideraction is "datapoint" and action is "slider".

Slider Range

Specifies the range of the slider. A datapoint state in value/max format overrides this range with 0,max.

Attribute Values

Value	Description
<min,max>	Min, max values.

This attribute is available when action is "slider" or (action is "datapoint" and (device type of datapoint is one of "DIMMER", "VSHUT", or "HSHUT")).

When action is "slider" or (action is "datapoint" and (device type of datapoint is one of "DIMMER", "VSHUT", or "HSHUT")), this attribute defaults to 0,100.

Slider Unit

Unit displayed on value label, or % for percentage.

Attribute Values

Value	Description
<string>	Displays the unit after the value.
%	Displays the value as percentage. If there's a custom range (different from 0-100) the percentage is calculated.

This attribute is available when action is "slider" or (action is "datapoint" and (device type of datapoint is one of "DIMMER", "VSHUT", or "HSHUT")).

Slider Change Delay

Defines the time interval between value changes for sending values to the server.

Attribute Values

Value	Description
<number>	Delay in milliseconds.

This attribute is available when action is "slider" or (action is "datapoint" and (device type of datapoint is one of "DIMMER", "VSHUT", or "HSHUT")).

When action is "slider" or (action is "datapoint" and (device type of datapoint is one of "DIMMER", "VSHUT", or "HSHUT")), this attribute defaults to 50.

Slider Orientation

Specifies the orientation of the slider.

Attribute Values

Value	Description
auto	Default value. Auto.
horizontal	Horizontal.
vertical	Vertical.

This attribute is available when action is "slider" or (action is "datapoint" and (device type of datapoint is one of "DIMMER", "VSHUT", or "HSHUT")).

The default value is: auto.

Slider Display Value

Specifies wether the value is displayed.

Attribute Values

Value	Description
false	Default value. Hides the value.
true	Shows the value.

This attribute is available when action is "slider" or (action is "datapoint" and (device type of datapoint is one of "DIMMER", "VSHUT", or "HSHUT")).

The default value is: false.

Slider Display Pending Value

Specifies wether the pending value is displayed. The pending value is the value that is being sent to the server.

Attribute Values

Value	Description
false	Default value. Hides the pending value.
true	Shows the pending value.

This attribute is available when (action is "datapoint" or slideraction is "command" or slideraction is "datapoint") and (action is "slider" or ((action is "datapoint" and (device type of datapoint is one of "DIMMER", "VSHUT", or "HSHUT")))).

The default value is: false.

Slider Button Layout

Specifies the button layout.

Attribute Values

Value	Description
none	Default value. No buttons.
toggle	Toggle button.
switch	Power switch.
both	On/off buttons.

This attribute is available when action is "slider" or (action is "datapoint" and (device type of datapoint is one of "DIMMER", "VSHUT", or "HSHUT")).

The default value is: none.

Slider Off Value

Specifies the value to be sent when the off button is pressed. It also acts as a threshold to determine the state: any value above it is considered on. If a value is specified, the On Value will default to the maximum value of the range.

Attribute Values

Value	Description
<string>	Value.

This attribute is available when sliderbuttonlayout is "toggle" and (action is "slider" or ((action is "datapoint" and (device type of datapoint is one of "DIMMER", "VSHUT", or "HSHUT")))).

When sliderbuttonlayout is "toggle" and (action is "slider" or ((action is "datapoint" and (device type of datapoint is one of "DIMMER", "VSHUT", or "HSHUT")))), this attribute defaults to off.

Menu Items

Specifies the menu items.

Attribute Values

Value	Description
<json>	Menu item.

This attribute is available when action is "menu".

Feedback

If feedback is enabled, when the action is performed, a loader is displayed until the server responds.

Also the action can't be performed again until the server responds.

Attribute Values

Value	Description
false	Default value. Feedback is disabled.
true	Feedback is enabled.

This attribute is available when action is "command".

The default value is: false.

Confirm

Requires a confirmation before performing the action.

Attribute Values

Value	Description
false	Default value. No confirmation, the action is performed right away.
doubleclick	A second click (or touch or enter key) is required to confirm the action.
popup	A popup is displayed to ask for confirmation.

The default value is: false.

Confirm Message

The confirmation message to be displayed if the "confirm" attribute is set to "popup".

Attribute Values

Value	Description	Example
<string>	The message to be displayed in the confirm popup.	Are you sure?

This attribute is available when confirm is "popup".

Display State In Description

Specifies whether the button's state should be displayed in the description. If set, description can't be manually specified.

Attribute Values

Value	Description
true	Default value. Shows the state.
false	Hides the state.

This attribute is available when action is "datapoint".

When action is "datapoint", this attribute defaults to true.

States

Specifies how datapoint values (e.g., on, off) map to corresponding sets of attributes for the button. When a datapoint matches a defined state, the associated attributes are applied to the button. State attributes override the button's set attributes.

Example:

• For a datapoint value of on, you might set the button's style to primary and the icon to lightbulb.
• For off, you might specify a style of default and an icon of lightbulb-off.

Attribute Values

Value	Description	Example
<JSON array>	Array of datapoint states.	[{"value":"on","color":"yellow","icon":"icon:mdi#lightbulb"}]

This attribute is available when action is "datapoint".

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Label

Label

Specifies the button's label.

Attribute Values

Value	Description
<string>	Button's label.

Label Format

Specifies the label's format.

Attribute Values

Value	Description	Example
<JSON object>	Format configuration object.	{"format":"number","style":"currency","currency":"USD"}

Label CSS

note

This attribute has been deprecated since ver. 4.0

Description

Specifies a description displayed below the label.

Attribute Values

Value	Description
<string>	Button's description.

This attribute is available when action is not "datapoint" or displaystateindescription is "false".

Tooltip

A text displayed when hovering over the object, commonly used to display additional information.

Attribute Values

Value	Description	Example
<string>	Text to be displayed.	Set phasers to stun

Icon

Icon

Specifies the icon source to display. Its position is set with the "Icon Position" attribute.

The value can be:

• An icon prefixed with icon:
• A relative path to an image file, such as lights/lamp.png, resolved from the standard image folders

Attribute Values

Value	Description	Example
<icon>	Icon prefixed with icon:.	icon:mdi#account-multiple
<image>	Relative path to the image file.	lights/lamp.png

Icon Position

Specifies the position of the icon.

Attribute Values

Value	Description
auto	Default value. Equals "center" if an icon is specified, but there's no label. Equals "left" if both an icon and a label are specified. Otherwise, equals "none".
none	No icon. The label is centered.
left	Place the icon on the left of the label.
top	Place the icon on top of the label.
center	Place the icon in the center, hiding the label.
background	Place the icon in the center, behind the label.

This attribute is available when icon is not empty or action is "datapoint".

When icon is not empty or action is "datapoint", this attribute defaults to auto.

Icon Color

Specifies the icon's color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

This attribute is available when icon is one of "icon:%" or "".

Icon Size

Specifies the icon's size.

Attribute Values

Value	Description	Example
<int>	Size in pixels.	10

This attribute is available when icon is not empty or action is "datapoint".

Default behavior:

• When icon is not empty or action is "datapoint", this attribute defaults to auto.
• When iconposition is "left", this attribute defaults to 20.

Icon Fit

Specifies how the image should be resized to fit its container.

Attribute Values

Value	Description
fill	The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit.
contain	Default value. The image keeps its aspect ratio, but is resized to fit within the given dimension.
cover	The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit.
none	The image is not resized.
scale-down	The image is scaled down to the smallest version of none or contain.

This attribute is available when icon is neither "", "icon:%", nor "loader:%".

When icon is neither "", "icon:%", nor "loader:%", this attribute defaults to contain.

Secondary Icon

Specifies a secondary icon to display. Its position depends on the "Icon Position" attribute.

Attribute Values

Value	Description
<icon>	An icon or image.

This attribute is available when action is not "datapoint".

Secondary Icon Color

Specifies the secondary icon's color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

This attribute is available when secondaryicon starts with "icon:".

Secondary Icon Size

Specifies the secondary icon's size.

Attribute Values

Value	Description	Example
<int>	Size in pixels.	10

This attribute is available when secondaryicon is not empty.

When secondaryicon is not empty, this attribute defaults to auto.

Secondary Icon Fit

Specifies how the image should be resized to fit its container.

Attribute Values

Value	Description
fill	The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit.
contain	Default value. The image keeps its aspect ratio, but is resized to fit within the given dimension.
cover	The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit.
none	The image is not resized.
scale-down	The image is scaled down to the smallest version of none or contain.

This attribute is available when secondaryicon is neither "", "icon:%", nor "loader:%".

When secondaryicon is neither "", "icon:%", nor "loader:%", this attribute defaults to contain.

Style

Color

Specifies the button color.

Attribute Values

Value	Description
default	Default value. Default color.
primary	Primary color, used to highlight action buttons.
warning	Warning color, used to highlight warning buttons.
success	Success color, used to highlight success buttons.
error	Error color, used to highlight error buttons.
light	Light color.
dark	Dark color.
red,blue,yellow,green,yellow,purple,orange,green	Palette colors.
custom	Custom color, defined in the "Custom Color" attribute.

The default value is: default.

Custom Color

Specifies the button's custom color.

Attribute Values

Value	Description
<html color>	Any valid HTML color.

This attribute is available when style is "custom" or style is "glass" or color is "custom".

Look

Specifies the button's look.

Attribute Values

Value	Description
filled	Default value. Filled look, with a solid background.
clear	Clear look, no background or border.
outlined	Outlined look, with a solid border.
glass	Glass look, with a semi-transparent background.

The default value is: filled.

Shape

Specifies the button's shape.

Attribute Values

Value	Description
default	Default value. Default shape.
rounded	Rounded shape.
pill	Pill or circle shape.
rectangle	Rectangle shape.

The default value is: default.

Click Effect

Specifies the object's click effect.

Attribute Values

Value	Description
none	Default value. No effect.
pulse	Pulse effect.
ripple	Ripple effect.
bubbles	Bubbles effect.
confetti	Confetti effect.
shutter-in	Shutter In effect.
shutter-out	Shutter Out effect.

The default value is: none.

Click Effect Color

Specifies the object's click effect color.

Attribute Values

Value	Description
<html color>	Any valid HTML color.

This attribute is available when clickeffect is not "none".

Click Effect Particles

Specifies how many particles are emitted by particle-based click effects.

Attribute Values

Value	Description
normal	Default value. Default particle count.
many	More particles.
lots	Lots of particles.

This attribute is available when clickeffect is one of "bubbles" or "confetti".

When clickeffect is one of "bubbles" or "confetti", this attribute defaults to normal.

Layout

Padding

Specifies the padding of the button. The padding is the space between the content of the button and its border.

Attribute Values

Value	Description	Example
<int>	Specify the padding in pixels for all sides of the object.
<top> <right> <bottom> <left>	Specify the padding in pixels for each side of the object.	10 20 30 40

The default value is: auto.

Gap

Specifies the gap between the label and icons.

Attribute Values

Value	Description
<int>	Gap in pixels.

The default value is: auto.

CSS Style

note

This attribute has been deprecated since ver. 4.0

Badge

Badge

Shows an element in the top right corner, useful for notifications.

Attribute Values

Value	Description
false	Default value. Hides the element.
true	Shows the element.

The default value is: false.

Badge Label

Specifies a label for the badge.

Attribute Values

Value	Description
<string>	Label.

This attribute is available when badge is "true".

Badge Icon

Specifies an icon for the badge.

Attribute Values

Value	Description
<icon>	An icon or image.

This attribute is available when badge is "true".

Badge Color

Specifies the badge color.

Attribute Values

Value	Description
<color>	Badge color.

This attribute is available when badge is "true".

Badge Font Color

Specifies the badge's font color.

Attribute Values

Value	Description
<color>	Font color.

This attribute is available when badge is "true".

Badge Icon Color

Specifies the badge's Icon Color color.

Attribute Values

Value	Description
<color>	Icon Color color.

This attribute is available when badge is "true".

Typography

Font Family

Specifies the font family.

The default value is: default.

Font Size

Specifies the font size in pixels or percentage (relative to the project's font size).

Attribute Values

Value	Description	Example
<integer>	Font size in pixels.
<percentage>%	Relative font size in percentage.	90%

Default behavior:

• When true, this attribute defaults to 12.
• Otherwise, this attribute defaults to 14.

Font Color

Specifies the text CSS color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

Font Weight

Specifies the weight of the font.

Attribute Values

Value	Description
normal	Default value. Normal.
bold	Bold.
bolder	Bolder.
lighter	Lighter.

The default value is: normal.

Italic

Show the text in italics.

Attribute Values

Value	Description
false	Default value. Normal.
true	Italics.

The default value is: false.

Small Caps

Sets the font to small caps.

Attribute Values

Value	Description
false	Default value. Normal.
true	Small caps.

The default value is: false.

Decoration

Specifies the text decoration.

Attribute Values

Value	Description
none	Default value. No decoration.
underline	Underline.
overline	Overline.
line-through	Line through.

The default value is: none.

Text Align

Sets the horizontal alignment of the text.

Attribute Values

Value	Description
none	Default value. No alignment.
left	Left alignment.
right	Right alignment.
center	Center alignment.
justify	Justified alignment.

Default behavior:

• When iconposition is "left", this attribute defaults to left.
• When iconposition is "top", this attribute defaults to center.

Line Height

Sets the line height of the text.

Attribute Values

Value	Description
<float>	Specify the line height as a multiple of the font size.

The default value is: 1.0.

Popup Menu Font

Popup Font Family

Specifies the font family.

This attribute is available when action is "menu".

When action is "menu", this attribute defaults to default.

Popup Font Size

Specifies the font size in pixels or percentage (relative to the project's font size).

Attribute Values

Value	Description	Example
<integer>	Font size in pixels.
<percentage>%	Relative font size in percentage.	90%

This attribute is available when action is "menu".

When action is "menu", this attribute defaults to 14.

Popup Font Color

Specifies the text CSS color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

This attribute is available when action is "menu".

Popup Font Weight

Specifies the weight of the font.

Attribute Values

Value	Description
normal	Default value. Normal.
bold	Bold.
bolder	Bolder.
lighter	Lighter.

This attribute is available when action is "menu".

The default value is: normal.

Popup Italic

Show the text in italics.

Attribute Values

Value	Description
false	Default value. Normal.
true	Italics.

This attribute is available when action is "menu".

The default value is: false.

Popup Small Caps

Sets the font to small caps.

Attribute Values

Value	Description
false	Default value. Normal.
true	Small caps.

This attribute is available when action is "menu".

The default value is: false.

Popup Decoration

Specifies the text decoration.

Attribute Values

Value	Description
none	Default value. No decoration.
underline	Underline.
overline	Overline.
line-through	Line through.

This attribute is available when action is "menu".

The default value is: none.

Popup Line Height

Sets the line height of the text.

Attribute Values

Value	Description
<float>	Specify the line height as a multiple of the font size.

This attribute is available when action is "menu".

When action is "menu", this attribute defaults to 1.0.

View

Visible

Sets the object's visibility.

Attribute Values

Value	Description
true	Default value. Visible.
false	Hidden.

The default value is: true.

Enabled

Specifies if the object is enabled or disabled. A disabled object appears as grayed out and can't be interacted with.

Attribute Values

Value	Description
true	Default value. Enabled.
false	Disabled.

The default value is: true.

Blink

Blinks the object at the specified speed.

Attribute Values

Value	Description
false	Default value. Not blinking.
slow	Blinks slowly.
fast	Blinks fast.

The default value is: false.

Transition

Specifies the transition effect when the object is shown or hidden.

Attribute Values

Value	Description
none	Default value. No transition.
fade	Fade in/out.
fade-left	Slide from left and fade in/out.
fade-right	Slide from right and fade in/out.
fade-up	Slide from top and fade in/out.
fade-down	Slide from bottom and fade in/out.
slide-left	Slide from left.
slide-right	Slide from right.
slide-up	Slide from top.
slide-down	Slide from bottom.
zoom-in	Zoom in.
zoom-out	Zoom out.
3d-flip-left	3D flip from left.
3d-flip-right	3D flip from right.

The default value is: none.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Transition Duration

Specifies the transition duration in milliseconds.

Attribute Values

Value	Description
<integer>	Duration in milliseconds.

This attribute is available when transition is not "none".

When transition is not "none", this attribute defaults to 300.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Transition Delay

Specifies the transition delay in milliseconds.

Attribute Values

Value	Description
<integer>	Delay in milliseconds.

This attribute is available when transition is not "none".

When transition is not "none", this attribute defaults to 0.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Opacity

Sets the object's opacity. Opacity is the degree to which content behind an object is hidden.

Attribute Values

Value	Description
0	The object is fully transparent.
>0.0, <1.0	The object is translucent (content behind the element can be seen).
1.0	Default value. The object is fully opaque.

The default value is: 1.0.

Rotation

Specifies the degrees by which the object is rotated. A positive number rotates it clockwise, while a negative value rotates it counter-clockwise.

The default value is: 0.

CSS Class

Specifies a CSS Class that applies to the object, useful to customize its appearance. Custom CSS Classes are specified within the custom.css file.

Margin

Specifies the margin of the object. The margin is the space outside the object's border.

Attribute Values

Value	Description	Example
<int>	Specify the margin in pixels for all sides of the object.
<top> <right> <bottom> <left>	Specify the margin in pixels for each side of the object.	10 20 30 40

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

View Scale

Specifies the scale of the object. The scale is the ratio between the object's size and the size of the view it is contained in.

Attribute Values

Value	Description
<float>	Specify the scale for both width and height of the object.

The default value is: 1.0.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Meta

Comment

Specifies a comment, visible only in the Project Editor. It can be used to add a note or a tag to the object. The filter in the object's SELECT panel applies to the comment as well.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Exclude

Excludes the object from the UI. Useful to temporarily hide an object without deleting it. Different from the "Visible" attribute, which hides the object in the UI but keeps it in the project, allowing it to be shown again with a UISet.

Attribute Values

Value	Description
false	Default value. Object is included in the UI.
true	Object is excluded from the UI.

The default value is: false.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.