# 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. **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. ## Styling and configuration Select the button and click on the settings icon :gear: 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 c**hanges 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. ## Click to trigger A button that is clicked by an app user can send an event to the application logic. This event can then be used to trigger a function or call up another page of the app. A button that is clicked by an app user can trigger a function by transferring an event to the logic. capture events from app users via click. Such an event can then be used to trigger a function in the application logic. 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.

## Conditional appearance Besides the click property, buttons offer conditional properties that can be set by the logic to temporally or permanently change their appearance. To change these properties dynamically, link a function output to a button using drag and drop. ### Disabling and enabling 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. {% hint style="info" %} 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. {% endhint %} #### Enable By calling the `enable` property, a button will be enabled, whenever the linked output or modifier value says`true` or is a truthy value. {% hint style="info" %} A buttons default state is enabled. With the `initially disabled` setting, a buttons default state can be set to disabled. {% endhint %} #### 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.