Skip to main content

Button

This node places a customizable button in the visual tree.

The button has a Click signal that you can use to trigger actions.

This control contains all logic such as accessibility etc. It can be styled in via it's properties. Use variations to create different types of buttons

Inputs

The Button can be enabled and disabled using the Enabled input:

DataDescription
EnabledSpecifies if the control is Enabled (true) or Disabled (false). A disabled control will not respond to any user interaction.

The Button node has a set of label properties that can be set:

DataDescription
Enable LabelSets whether the label is visible or not.
Text StyleSet an existing text style to this node, or create a new text style from the current properties.
LabelA text string that will be shown as the label on the button.

Similarly, it has a set of icon properties:

DataDescription
Enable IconSets whether the icon is visible or not.
TypeUse this to set if you want to use a predefined icon or a custom image from the project folder.
SourceWhere to get the icon.
SpacingThe spacing between the text and the icon.
PlacementSets whether the icon should be to the left or to the right of the Label
SizeThe width of the icon in px.
ColorSets the color of the icon. Only visible if Type is set to icon.

Visual

This node supports the following Visual Input Properties:

Outputs

The main output for the button is the Click signal:

SignalDescription
ClickA signal is sent on this output when the button is clicked.

It also features a set of more in depth signals:

SignalDescription
ChangedA signal is sent on this output when the value of the control is changed by user interaction.
FocusedA signal is sent on this output when the control is focused.
BlurredA signal is sent on this output when the control is blurred, i.e. it has lost the input focus.
Pointer DownEmitted when the mouse is pressed or finger is down on the node.
Pointer UpEmitted when the mouse is released or finger is lifted on the node.
Hover StartEmitted when the mouse enters the node.
Hover EndEmitted when the mouse leaves the node.

States

Apart from triggering signals the Button node also notifies of its state through data outputs:

DataDescription
EnabledA boolean output that is true if the control is in Enabled state and false if it is Disabled. This is useful when using this control as a base for your own component that will represent visually that it is enabled or disabled.
FocusedThis is a boolean type output that will be true if the control is in Focused state, and false otherwise. This is useful when using this control as a base for your own component that will represent visually that it is focused. This can be due to the user selecting the control for input or by using the keyboard.
HoverA boolean type output that is true when the user hovers over this control with the mouse and false otherwise. This is useful when using this control as a base for your own component that will represent visually that it is hovered.
PressedA boolean output that is true when the user is currently pressing the control. This is useful when using this control as a base for your own component that will represent visually that it is pressed.

Visual

This node supports the following Visual Output Properties:

@include "../shared-props/inputs/visual-input-properties.md" @include "../shared-props/outputs/visual-output-properties.md"