Buttons

Buttons are a fundamental element in many UIs. Their primary function is to capture user events through clicks. Beyond this, buttons can also guide users through their appearance.

Create button

To create a button:

1. Click on the trigger widgets icon in the top bar.
2. Click on Button.

3. Hover above the UI editor and click where you want to place the button.

Configure appearance

Select the button and click on the settings icon ⚙️ in the top bar to configure a button. The following settings are available:

• Text can adjust the button's text. For a longer text, make sure to increase the button width accordingly.

• Icon adds an icon left from the text.

• Text size changes the text size.

• Icon size changes the icon size.

• Type lets you choose from one of five button types with customizable appearance via theming. Their difference lies in the color scheme. The available types are default, normal, success, danger and back.

• Style adjusts the frame and filling of a button. There are three styles: text, contained and outlined.

• Hover text adds a text that is only visible when the mouse pointer hovers over the button.

• Initially disabled allows that a button can be enabled when certain conditions apply, e.g., the completion of all mandatory fields of a form.

Trigger a function

Buttons allow capturing events from users of an app. Such an event can then be used to trigger a function in the backend so that it performs its action. A trigger that is linked to a button says on button click. To unlink trigger and button, click the x in the linked trigger box.

Linked trigger

Button effects

Besides the click property, buttons offer behavior properties that can be set by the backend to temporally or permanently change their appearance. To change these properties dynamically, link a function output to a button using drag and drop.

Condition-based toggle

The conditional enabling and disabling or toggling of a button can be achieved in two ways. For both ways, you must:

1. Link a button with an output or a modifier. After doing so, the property of the output/modifier says call disable by default.

2. Click on the property to change it to enable, toggle or done.

Disable

By calling the disable property, a button will be disabled, whenever the linked output or modifier value becomes false. Any other output value does not affect the button. A disabled button can't be clicked.

Enable

By calling the enable property, a button will be enabled, whenever the linked output or modifier value saystrue or is a truthy value.

The enable and disable property should only be used in combination if you want a button to switch between enabled and disabled depending on conditions.

Toggle

The toggle property combines enabling and disabling in one property. It only needs one link to an output or modifier. The button will be disabled whenever the linked value says false or is a falsy value. When the output or modifier says true or is a truthy value, the button will be enabled.

Load time

Call the done property to add a load time effect to a button. The effect will be shown for the time a function is computing its result. This can significantly improve the UX for functions with long load times, as users receive direct feedback.

Button with load time effect