ChargeButton2D
- Last UpdatedFeb 24, 2026
- 7 minute read
ChargeButton2D is a special type of shaped button designed for interactions that require a deliberate press-and-hold gesture, offering two configurable behaviors: Press and Hold, where the user must keep the button pressed until the charge completes, and Autofill, where the progress fills automatically without continuous user interaction.
This type of button inherits most of the functionality of the ButtonShape2D node. For image rendering, wrap alignment, and other features of the actual button, please refer to the documentation for ButtonShape2D.
For the ChargeButton2D, some additional features have been added, which makes this button useful in certain specific contexts.

Platform support
This element is fully supported on XR-Windows, XR-Portable Windows, XR-Portable iOS, XR-Portable Android, and XR-P WASM platforms.
|
XR-WIN |
XR-P-WIN |
XR-P-IOS |
XR-P-AND |
XR-P-WASM |
|---|---|---|---|---|
|
Full support |
Full support |
Full support |
Full support |
Full support |
|
|
|
|
|
|
Charge properties
The properties related to charging.
-
fillColor — Represents the color of the charging fill, and the user can select any color.
-
fillDirection — The user can choose between the four standard directions: right-to-left, left-to-right, bottom-to-top, and top-to-bottom. Additionally, a Center option is available, causing the fill to start from the center and expand outward until the entire internal area of the button is covered.

-
fillTime — The duration of the charging process, expressed in seconds.
-
fillMode
-
PressAndHold — The user must keep the button pressed until the fill is completed for the action to trigger.
-
AutoFill — The fill progresses automatically without requiring the user to hold the button, triggering the action when the fill completes.
-
-
startOnClick — Allows the user to decide whether the filling process should begin automatically when the button is clicked. If disabled, the filling will start only when the startFilling event is manually triggered. This gives full control over when the charging process begins.
Automated actions
In scenarios where automated actions are needed within the scene, the button can trigger a click automatically when the timer (charging) completes. This allows it to activate any desired functionality. When the charging process begins, the user also has the option to interrupt it and immediately trigger the click by pressing the button again while it is still charging.
ChargeButton2D fields
These are the fields specific to the ChargeButton2D node. Only node-level fields are listed; inherited fields are not included.
Field inheritance hierarchy: NodeBase > RectBase2D > ChargeButton2D
|
Fields |
Type |
Use |
Default |
Description |
|---|---|---|---|---|
|
buttonDown |
sbool |
Optional |
Read only |
This field becomes true when the button is pressed. |
|
changeOnUp |
sbool |
Optional |
false |
This field enables custom behavior of the buttonDown update for toggle and radio button modes. When set to false, buttonDown changes on mouse down. When set to true, it changes on mouse up. |
|
clicked |
sevent |
Optional |
Read only |
Raised when a click is completed (mouseDown and mouseUp inside button area). |
|
enabled |
sbool |
Optional |
true |
Enabled button interaction. |
|
fillColor |
svec4 |
Optional |
216, 216, 216 |
Defines the color of charging area. |
|
fillDirection |
senum |
Optional |
RightToLeft |
Defines the charging direction |
|
fillMode |
senum |
Optional |
PressAndHold |
Defines the charging mode. |
|
fillTime |
sfloat |
Optional |
1 |
Defines the charging time expressed in seconds. |
|
imageDisabled |
sstring |
Optional |
|
The image shown when disabled. |
|
imageDisabledColorFilter |
svec4 |
Optional |
127, 127, 127 |
A solid color that is blended to the imageDisabled, supports alpha channel. For more information about different blend strategies, see Image color filter modes. |
|
imageDisabledColorFilter Mode |
senum |
Optional |
none |
Defines the strategy used to blend the color selected in imageDisabledColorFilter to the displayed imageDisabled, The following options are available: none, screen, multiply, color, invert. See Image color filter modes section for details. |
|
imageDown |
sstring |
Optional |
|
The Clicked state image. |
|
imageDownColorFilter |
svec4 |
Optional |
147, 56, 51 |
A solid color that is blended on the displayed imageDown, supports alpha channel. For more information about different blend strategies, see Image color filter modes. |
|
imageDownColorFilterMode |
senum |
Optional |
none |
Defines the strategy used to blend the color selected in imageDownColorFilter on the displayed imageDown. The following options are available: none, screen, multiply, color, invert. See Image color filter modes section for details. |
|
imageNormal |
sstring |
Optional |
|
The Normal state image. |
|
imageNormalColorFilter |
svec4 |
Optional |
0, 175, 239 |
A solid color that is blended on the displayed imageNormal, supports alpha channel. For more information about different blend strategies, see Image color filter modes. |
|
imageNormalColorFilterMode |
senum |
Optional |
none |
Defines the strategy used to blend the color selected in imageNormalColorFilter on the displayed imageNormal, the following options are available: none, screen, multiply, color, invert. See Image color filter modes section for details. |
|
imageOver |
sstring |
Optional |
|
The Over state image. |
|
imageOverColorFilter |
svec4 |
Optional |
0, 175, 79 |
A solid color that is blended on the displayed imageOver, supports alpha channel. For more information about different blend strategies, see Image color filter modes. |
|
imageOverColorFilterMode |
senum |
Optional |
none |
Defines the strategy used to blend the color selected in imageOverColorFilteron the displayed imageOver. The following options are available: none, screen, multiply, color, invert. See Image color filter modes section for details. |
|
imageWrapAlignment |
senum |
Optional, |
center |
Defines the alignment of the displayed image relative to the node rect when the image aspect ratio and the node aspect ratio do not match. The following styles are supported: center, left, top, right, bottom, top_left, top_right, bottom_left, bottom_right. Only used when an image field is set. |
|
imageWrapMode |
senum |
Optional, |
fit |
Defines the wrap mode of the image in the node rect. The following styles are supported: fit, fill, fill_width, fill_height, original_size, stretch. Any value, except for stretch, will make the displayed image keep its original aspect ratio relative to the grid or the screen (depending on imageWrapKeepProportions). Only used when an image field is set |
|
isOverGraphics |
sbool |
Read only |
false |
Reveals the over state of the pointer with a pixel-perfect check. This field is true if the pixel of the ButtonShape2D graphics underlying the pointer position is colored with an alpha>0, false otherwise. |
|
joyInputEnable |
sbool |
Optional |
true |
Enabled joypad interaction. |
|
keyInputEnable |
sbool |
Optional |
true |
Enabled keyboard interaction. |
|
mouseDown |
sevent |
Optional |
Read only |
Raised when pressing mouse left button inside button area. |
|
mouseUp |
sevent |
Optional |
Read only |
Raised when releasing mouse left button inside button area or exiting button area with mouse left button pressed. |
|
shapeBorderThickness |
sfloat |
Optional |
2 |
Defines the thickness of the border. Only used when shapeStyle field is different from none. |
|
shapeCustom |
senum |
Optional |
{tension=0.1} {points=0.5 0.1,0.9 0.9,0.1 0.9}
|
Allows the definition of a custom shape by using the following syntax: {tension=(float)}{points=(float) (float), (float) (float), (float) (float), […]} where {points=…} is mandatory and shall contain a list of tuples, separated by ‘commas’, representing the points of the contour of the shape; x,y coordinates are expressed in unitary values where 0 represents 0% of the x/y axis and 1 represents 100% of the x,y axis {tension=…} is optional (default=0) and shall contain a float number representing the tension to apply to the edges of the shape, values >0 will make the shape convex while values <0 will make the shape concave, values in the range [-1,1] are recommended, but numbers outside that range work as well Example {tension=0.1}{points=0.5 0.1,0.9 0.9,0.1 0.9} This draws a triangle with vertexes in (x:0.5, y:0.1), (x:0.9, y:0.9) and (x:0.1, y:0.9) with slightly convex edges (according to the 0.1 tension) This example is the default value for the shapeCustom field. Only used when shapeStyle field is different from none. |
|
shapeDisabledBorderColor |
svec4 |
Optional |
17, 17, 17, 1 |
Defines the border color of the shape for the Disabled state. It can be transparent. Only used when shapeStyle field is different from none. |
|
shapeDisabledColor |
svec4 |
Optional |
63, 63, 63, 1 |
Defines the color of the shape for the Disabled state. It can be transparent. Only used when shapeStyle field is different from none. |
|
shapeDownBorderColor |
svec4 |
Optional |
140, 140, 140, 1 |
Defines border color of the shape for the Down state. It can be transparent. Only used when shapeStyle field is different from none. |
|
shapeDownColor |
svec4 |
Optional |
132, 219, 255, 1 |
Defines the color of the shape for the Down state. It can be transparent. Only used when shapeStyle field is different from none. |
|
shapeNormalBorderColor |
svec4 |
Optional |
114, 114, 114, 1 |
Defines the border color of the shape for the Normal state. It can be transparent. Only used when shapeStyle field is different from none |
|
shapeNormalColor |
svec4 |
Optional |
0, 175, 239, 1 |
Defines the color of the shape for the Normal state. It can be transparent. Only used when shapeStyle field is different from none. |
|
shapeOverBorderColor |
svec4 |
Optional |
63, 63, 63, 1 |
Defines the border color of the shape for the Over state. It can be transparent. Only used when shapeStyle field is different from none. |
|
shapeOverColor |
svec4 |
Optional, |
0, 158, 214, 1 |
Defines the color of the shape for the Over state. It can be transparent. Only used when shapeStyle field is different from none. |
|
shapeRoundRectCorner |
sfloat |
Optional, |
20 |
Defines the corners radius, in pixels, of the rounded_rectangle shape. Only used when shapeStyle field is rounded_rectangle. |
|
shapeStyle |
senum |
Mandatory |
none |
Defines the style of the shape. The following styles are supported: rectangle, rounded_rectangle,circle, custom_shape, none. |
|
startFilling |
sevent |
Optional |
Not set |
Useful to trigger the start of the charging process. |
|
stopFilling |
sevent |
Optional |
Not set |
Useful to trigger the stop of the charging process. |
|
startOnClick |
sbool |
Optional |
true |
Allows the user to decide whether the filling process should begin automatically when the button is clicked. |