Design tab#

Button Content#

Field	What it does
Layout	Chooses how icon and text lines are arranged: a single icon+text line, icon with superimposed text, three lines (a distinct-colored top line, or a larger middle line), two lines, or two lines with two icons and two gauge bars.
Icon	Selects an icon by search or dropdown, uploads a custom PNG, or opens the custom icon library.
Text / Context / Text 2	The button's text fields: which ones appear depends on Layout. Each has a Variable Selector (folder icon) to browse and insert a variable, and an expression-mode toggle (√x) to evaluate the field as an expression instead of literal text.

Button Styling#

Select + to add a styling option, or type in the menu's search field to find one. The options a button's layout uses by default, such as Icon Color, Text Color, and Background Color, are already in the list; anything else only appears once you add it. Options already in the list are greyed out in the menu. Remove an option with its ×.

Colors:

Option	What it colors
Background Color	The button's background.
Text Color	The main text line.
Text 2 Color	The second text line, on layouts that have one.
Context Text Color	The text in the context (top) line, on three-line layouts.
Context Background Color	The background behind the context line.
Icon Color	The icon.
Encoder Color	On an encoder, the border shown while it's being turned and its level indicator.
Bookmark Color	A small square marker on the button, such as the tag color on routing buttons.
Gauge 1 Color / Gauge 2 Color	The gauge bars, on the two-gauge layout.
Gauge 1 Icon Color / Gauge 2 Icon Color	The small icons next to each gauge bar.

Text and behavior:

Option	What it does
Text Font Size	Sets the text size, from XXS to XXL (default M).
Auto Shrink Text	Shrinks text that doesn't fit, so it stays on the button.
Text Wrap	Wraps long text onto more lines.
Disable Scrolling	Stops long text from scrolling across the button.
Blinking	Makes the button blink.

A cue offers only Background Color. A button with a custom layout offers only the options that layout supports.

Location#

Field	What it does
Flow	Float positions the element dynamically from top-left; Static (the default) uses fixed X/Y coordinates; Anchor positions it in a corner and lets it resize with the canvas; Fixed is like Anchor but unaffected by scrolling.
X / Y	Coordinates, shown when Flow is Static.

Actions tab#

Element	What it does
Step 1, 2, ...	Each step holds its own actions per handler; + adds a step, the duplicate button copies the current one.
Step Style	Per-step styling overrides, same shape as Button Styling.
Reorder Steps / Delete Step	Shown next to the steps once there's more than one.
Step cogwheel	Two settings for the whole button: Relative Delays (on by default; each action's delay counts from the previous action instead of from the button press) and Auto Progress (on by default once there's more than one step; each press advances to the next step).
Action handlers	Add the ones your surface and control scheme need from Add Action Handler. Press and Release run when the button goes down and up. Hold runs after the button has been held for a time you choose. Single runs on a press you let go of within 5 seconds, and Double on two quick taps; both stay on the step you started on. Left/Right fire on rotation in each direction; Encoder fires once per rotation delta and exposes `$(self.encoderValue)`. How button actions work, above the handler buttons, explains the same in the app.
+ Add Action...	Searches connection and internal actions, or opens ActionGroup/ActionLogic/While: see Build more capable button actions.

Feedbacks tab#

Element	What it does
+ Add Feedback...	Searches connection and internal feedbacks, or opens a Group/Logic feedback.
Per-feedback Preview	Shows the button's appearance when the feedback is active, with Solo/Full views and a Test button.
Per-feedback Button Content / Button Styling	The fields this specific feedback overrides while active: independent of the button's own base styling.

See Add more feedback to a button.

Variables tab#

Defines this button's own Self variables, Parent variables on the section it sits in, and Position variables. See Understand variable scope: this tab's behavior isn't button-specific.

Repeater tab#

Turn on Enable to repeat this button. In manual mode you set a fixed count, and each copy gets its own $(self.repeatIndex). A repeater can also be created from an action's or feedback's own dropdown field, making one button per option: see Build more capable button actions.

Field	What it does
Enable	Turns the repeater on or off without deleting its configuration.
Amount	How many copies to make, in manual mode. The buttons next to it pick 4, 8, 16, 24, or 32.
Index Variable	Start and Increment for `$(self.repeatIndex)` across the copies.
Data Sources	Lists every action and feedback repeater feeding this button's generated set, each showing its connection, action or feedback, and option field.
Direction	Lays generated buttons out left-to-right or top-to-bottom.
Customize Data & Labels	Opens an editor with Generated Buttons (preview and override each resulting button's label/icon/color, or hide it) and All Available Data (align more than one data source by hand, sort, or hide entries before they generate).

Where to go next#

Was this helpful?

0 of 0 users found this page helpful