> 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/Q625pQNc0nXqVGPtyjAY/building-apps/ui-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.

## Create button

To create a button:

1. Click on the trigger widgets icon in the top bar. <img src="https://3495989837-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE5Ketpww1s7TauSAJrJ8%2Fuploads%2FvYFxrLXJ5JkJ6hUBZwZA%2Fimage.png?alt=media&amp;token=59f1e478-bb70-4414-8dc4-0e87c636b1a8" alt="trigger widgets icon" data-size="line">
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 :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, e.g., the completion of all mandatory fields of a [form](/~/changes/Q625pQNc0nXqVGPtyjAY/building-apps/ui-elements/input-widgets/form-wip.md).

## 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.

<div align="left"><figure><img src="https://3495989837-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE5Ketpww1s7TauSAJrJ8%2Fuploads%2F8EIuoiwXnN3oj85DlcCQ%2Fimage.png?alt=media&amp;token=fcd703a5-58cc-4d30-9d29-29117d57d78d" alt="" width="189"><figcaption><p>Linked trigger</p></figcaption></figure></div>

## 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.&#x20;
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 says`true` or is a truthy value.&#x20;

{% 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 %}

#### 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.&#x20;

<div align="left"><figure><img src="https://3495989837-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE5Ketpww1s7TauSAJrJ8%2Fuploads%2Fqruh9cL8MtQcvcLh30Ru%2Fimage.png?alt=media&amp;token=6372aaac-a695-49ac-a750-8c3f7cd0bd6a" alt=""><figcaption><p>Button with load time effect</p></figcaption></figure></div>


---

# 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.heisenware.com/~/changes/Q625pQNc0nXqVGPtyjAY/building-apps/ui-elements/buttons.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.