Button

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

Data Bindings

Connect the widget to your application logic by dragging the corresponding items from the Backend Builder.

Widget to logic

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

Property	Type	Description
onClick	Event / String	Fires when the user clicks the button. Connect it to a Function Trigger to start a process, or connect it to a Function Input to pass the button text to your logic.

Logic to widget

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

Property	Type	Description
disable	Boolean	When true, disables the button and prevents clicks.
enable	Boolean	When true, enables the button. Use this to re-enable a button that was set to initially disabled in its settings.
toggle	Boolean	Toggles the button state between enabled and disabled 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 disappears when the Function provides an output.

Configuration

Double-click a button in the UI preview or select the button and click the edit icon to access its configuration settings.

Setting	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 color scheme based on the app theme. Options include default, normal, success, danger, back, and transparent.	type
Styling Mode	Adjusts the visual style of the button. Options include text, contained, and outlined.	style
Hover Text	Adds a tooltip that appears when the user hovers over the button.	hoverText
Initially Disabled	If true, the button is disabled when the app first loads.	initiallyDisabled
Requires Confirmation	If true, opens a confirmation popup on click. You can adjust the title and text of the dialogue. The user can choose to answer with yes or no.

Making specific UI areas clickable

You can use transparent buttons to collect clicks in specific areas of your interface and pass information to your logic. This is useful for building interactive visual maps.

For example, you can upload an image of your shopfloor and place a transparent button over a specific machine. Set the button text to the machine ID. Because the button type is set to transparent, the text remains hidden. When a user clicks the machine on the image, the button passes the machine ID to your logic via the onClick event. You can use this ID to perform further actions, such as navigating to a detail page and filtering the data for that specific machine.