Buttons
Last updated
Last updated
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.
To create a button:
Click on the trigger widgets icon in the top bar.
Click on Button.
Hover above the UI editor and click where you want to place the button.
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.
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.
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.
The conditional enabling and disabling or toggling of a button can be achieved in two ways. For both ways, you must:
Link a button with an output or a modifier. After doing so, the property of the output/modifier says call disable by default.
Click on the property to change it to enable, toggle or done.
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.
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.
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.
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.
