> For the complete documentation index, see [llms.txt](https://docs.heisenware.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.heisenware.com/~/changes/eYCCpn9cCBKOYnZA6a8f/building-apps/ui-widgets-and-elements/buttons.md). # 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.

--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.heisenware.com/~/changes/eYCCpn9cCBKOYnZA6a8f/building-apps/ui-widgets-and-elements/buttons.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.