Button component is very similar to the the Button node but there are some differences. The UI Button can be placed much more precisely than the Button node - however it does not have some of the features available in the Button Node such as expanded touch areas.
| Name | Set the name of the Button Component Used to identify Inputs & Outputs in the User Interface Node |
| Text | Set text to be displayed in the Button (can be left empty) |
| Copy/Paste Style | Copy the current properties to the UI Editor clipboard or paste the properties currently saved in the clipboard to this Button |
| Colors | Set the colors to be used by different parts or states of the Button |
| Text Size | Set the size of the text displayed in the Button |
| Shape | Choose from a variety of preset shapes for the Button |
| Roundness | Set the roundness of the corners of the button * this is only visible when the Shape type is set to Round Corners |
| Border Width | Set the width of the Button's border |
| Image | Select an image to be used as a texture for the background of your Button The image will stretch to fit the size of the Button |
| Text Margin | Define how much space there should be between the text and the edge of the Button |
| Inputs and Outputs | Open the Inputs and Outputs menu to select what Inputs and Outputs will be visible in the User Interface Node for this Button |
| Auto Alignment | Automatically update the Button's alignment as it is moved around the canvas to the nearest alignment point |
| Alignment | Set the screen region to align the Button with |
| Width/Height | Set the Width & Height of the Button |
| X/Y | Set the X & Y screen position relative to the set alignment point |
| Visible | Set the Button's visibility * Note that invisible buttons will not be visible during gameplay will remain visible in the UI Editor canvas |
| Transition | Set how the Button should appear/disappear when it is made visible or invisible |
| Rotation | Set the rotation of the Button |
| Controller Mapping | Set the input to be used if your game is being played with a keyboard or controller See Keyboard & Controller Actions below for more info |
Edit which inputs and outputs are enabled to send data: tap the Inputs & Outputs button in the Properties menu.
| Inputs | |
|---|---|
| Position X & Y | Set where the button shows up by adjusting its X or Y position |
| Rotation | Rotate the button by entering a value |
| ↳ As Degrees | Use the input value as degrees for rotation |
| Scale | Adjust the size of the button |
| Opacity | Adjust how see-through the button is |
| Enabled | Control whether the button can be pressed |
| Background color | Pick the background color for the button |
| Text color | Pick the text color for the button |
| Border color | Pick the border color for the button |
| Visible | Show or hide the button |
| Collapsed | Hide the button and automatically shift nearby components to fill the space. Note: Only works if the button is inside a vertical or horizontal layout. |
In addition to the standard outputs— On Start (enabled by default), On End, and On Down — the UI button component also offers optional outputs for advanced touch and object detection. These let you track drag gestures, retrieve 3D touch positions, or detect objects under the touch point. With Group and Ignore Filters, you can define exactly which objects respond to these interactions—perfect for creating drag-to-move controls, object-specific input, or UI elements that react only over certain areas.
These 3D features use raycasting to detect objects under the touch, filtered by the selected groups and ignored groups.
| On start | Sends a signal or value when the button is pressed |
| On end | Sends a signal or a value when the button is released |
| On down | Sends a signal or value continuously while the button is held down |
| On move X | Outputs the horizontal (X-axis) screen position during a drag gesture. Note: This only works for drag gestures that start directly on the button component of the UI. |
| On move Y | Outputs the vertical (Y-axis) screen position during a drag gesture. Note: This only works for drag gestures that start directly on the button component of the UI. |
| On start 3D vector | Outputs the 3D position vector of a touch event, at the start of a touch. This works only if the touch begins on the UI button. The group and ignore filters control which objects define valid areas for sending the position. For example, if the touch begins over an object assigned to an ignored group, the position vector will not be sent. |
| On start 3D object | Outputs a reference to the object directly under the touch point at the start of a touch — if the object matches the group filter and the touch begins on the UI button. Use the ignore filter to exclude specific objects. |
| On move 3D vector | Continuously outputs the 3D position during a drag gesture that starts on the button. The group and ignore filters define which objects beneath the button allow the position vector to be sent. |
| On move 3D object | Outputs a reference to any object under the touch point during a drag gesture — if the touch starts on the UI button and the object matches the group filter. Use the ignore filter to exclude specific objects. |
| On move 3D failed | Triggers during a drag gesture that starts on the UI button but does not pass over any object matching the group filter. This output helps handle cases where no valid object is detected under the touch. |
| Move 3D group filter | Defines which object groups are considered valid for the UI node's 3D interaction. Objects must belong to at least one selected group (indicated by toggled-on colors) to be detected. Used to focus logic only on relevant objects and areas. |
| Move 3D ignore filter | Excludes objects from detection. Any object in a toggled-on group color will be ignored. Useful for preventing interactions with certain objects or areas like background. Ignored objects are skipped, allowing you to detect and select objects behind them instead. |
| Type | Keyboard Input | Controller Input |
| None | Input is not mapped to controller or keyboard | |
| Left | Arrow Left | D-pad Left |
| Right | Arrow Right | D-pad Right |
| Up | Arrow Up | D-pad Up |
| Down | Arrow Down | D-pad Down |
| Action 1 | Space or H | A or Left Trigger |
| Action 2 | Enter or J | B or Right Trigger or Mouse Left Click |
| Action 3 | Shift or K | X or Left Shoulder or Mouse Right Click |
| Action 4 | Ctrl or L | Y or Right Shoulder or Mouse Middle Click |
| Number 1 | 1 or F1 | No controller Input |
| Number 2 | 2 or F2 | No controller Input |
| Number 3 | 3 or F3 | No controller Input |
| Number 4 | 4 or F4 | No controller Input |
| Number 5 | 5 or F5 | No controller Input |
| Number 6 | 6 or F6 | No controller Input |
| Number 7 | 7 or F7 | No controller Input |
| Number 8 | 8 or F8 | No controller Input |
| Number 9 | 9 or F9 | No controller Input |
| Number 10 | 10 or F10 | No controller Input |
| Next | + or M | Controller Forward or Mouse Wheel Up |
| Previous | - or N | Controller Back or Mouse Wheel Down |
Note: Keyboard & controller inputs may not be compatible with all devices
Inputs with multiple options might work with any/all or none of the listed input depending on device