This node renders a clickable button.
The Button node is a fundamental UI control for triggering actions.
The Button node creates a standard button element. It can contain text (Label) and an icon. It emits a Click signal when pressed, which is the primary way to start logic flows in your application.
General
| Data | Description |
|---|
| Label | The text to display on the button. |
| Disabled | Boolean. If true, the button cannot be clicked and usually appears grayed out. |
Style
| Data | Description |
|---|
| Background Color | The background color of the button. |
| Text Color | The color of the label text. |
| Border Radius | Corner roundness. |
Icon
| Data | Description |
|---|
| Icon | Name of the Material Icon to display (e.g., "home", "settings"). |
| Icon Position | "Left" or "Right" of the text. |
Outputs
Events
| Signal | Description |
|---|
| Click | Triggered when the user clicks or taps the button. |
| Double Click | Triggered on double click. |
| Long Press | Triggered when held down. |
Usage
Basic Action
- Add a Button.
- Set Label to "Submit".
- Connect Click to a REST node's Fetch input.
Navigation
- Add a Button.
- Set Label to "Go Home".
- Connect Click to a Navigate node.
Detailed Behavior
- Visual States: Supports Hover, Pressed, and Disabled visual states via the property panel.
- Layout: Acts as a flex container for its label and icon.
Troubleshooting
- Not Clicking: Check if Disabled is true. Also check if something transparent is covering the button (z-index issue).