# Button Inspector reference

> Every field on a button's Inspector, organized by tab, covering Design, Actions, Feedbacks, Variables, and Repeater.

Every field on a button's own Inspector, organized by tab. For a hands-on introduction, see Create your first button ; for how Actions, Feedbacks, and the Repeater actually behave, see Build more capable button actions and Add more feedback to a button . 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 Create your first button . Build more capable button actions . Add more feedback to a button .