noodl-docs/nodes/ui-controls/button

hide_title, hide_table_of_contents, title

hide_title	hide_table_of_contents	title
true	true	Button node

{/##head##/}

Button

This node places a customizable button in the visual tree.

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

{/*##head##*/}

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:

@include "../../shared-props/inputs/_enabled.md"

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

Data	Description
Enable Label	Sets whether the label is visible or not.
Text Style	Set an existing text style to this node, or create a new text style from the current properties.
Label	A text string that will be shown as the label on the button.

Similarly, it has a set of icon properties:

Data	Description
Enable Icon	Sets whether the icon is visible or not.
Type	Use this to set if you want to use a predefined icon or a custom image from the project folder.
Source	Where to get the icon.
Spacing	The spacing between the text and the icon.
Placement	Sets whether the icon should be to the left or to the right of the Label
Size	The width of the icon in px.
Color	Sets the color of the icon. Only visible if Type is set to icon.

Visual

This node supports the following Visual Input Properties:

• Margin
• Padding
• Alignment
• Dimensions
• Layout, Position
• Text Styles
• Style
• Border Style
• Corner Radius
• Box Shadow
• Placement
• Dimension Constraints
• Other
• Advanced HTML

Outputs

The main output for the button is the Click signal:

Signal	Description
Click	{/##output:onClick##/}A signal is sent on this output when the button is clicked.{/##output##/}

It also features a set of more in depth signals:

@include "../../shared-props/outputs/_control-events.md"

States

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

@include "../../shared-props/outputs/_control-states.md"

Visual

This node supports the following Visual Output Properties:

• Bounding Box
• Mounted
• Other

@include "../../shared-props/inputs/_visual-input-properties.md"

@include "../../shared-props/outputs/_visual-output-properties.md"