Buttons

The Button widget is a fundamental element in any user interface. Its primary function is to capture a user's onClick event to trigger your backend logic. Beyond this, a button's appearance can be dynamically changed to provide visual feedback to the user.

Data Bindings

Connect the widget to your application's logic by dragging the corresponding items from the Flow Builder.

Widget → Logic (Outputs)

This describes the events the Button sends to your backend logic.

Property	Type	Description
onClick	Event	Fires when the user clicks the button. This is typically connected to a function's trigger.

Logic → Widget (Inputs)

This describes the properties you can control from your backend logic.

Property	Type	Description
disable	Boolean	When true, disables the button, preventing clicks.
enable	Boolean	When true, enables the button. Use this to re-enable a button that was set to 'Initially Disabled'.
toggle	Boolean	Toggles the button's enabled/disabled state based on a true or false input.
done	Any	Connect the output of a long-running function to this property to show a loading indicator on the button. The indicator will disappear when the function provides an output.

Configuration

Select the button in the UI editor and click the settings icon (⚙️) in the top bar to access its configuration.

Label	Description	Property
Text	The text label displayed on the button.	text
Icon	Adds an icon to the left of the text.	icon
Text Size	Changes the size of the text.	textSize
Icon Size	Changes the size of the icon.	iconSize
Type	Sets the button's color scheme based on the app's theme (default, normal, success, danger, back).	type
Style	Adjusts the visual style of the button (text, contained, outlined).	style
Hover Text	Adds a tooltip that appears when the user's cursor hovers over the button.	hoverText
Initially Disabled	If true, the button will be disabled when the app first loads.	initiallyDisabled