> For the complete documentation index, see [llms.txt](https://docs.ninox.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ninox.com/builder-hub/de/visualize-and-organize-your-data/create-and-customize-pages/button-component.md).

# Button-Komponente

Verwende Button für Aktionen auf der Seite und überall in deiner App.

Füge einen **Button** hinzu, um Logik per Klick auszuführen. Logik kann Nutzer innerhalb deiner App navigieren oder Tabellen, Datensätze und andere Seiten öffnen. Verwende [Ninox Script-Funktionen](/ninox-scripting/de/automate-your-workflows/work-with-functions.md), um Zahlen zu berechnen, Daten zusammenzufassen und mehr.

## **Button zu einer Seite hinzufügen**

{% stepper %}
{% step %}
**Tab Hinzufügen öffnen**

Öffne im **Einstellungsbereich** den Tab **Hinzufügen**.
{% endstep %}

{% step %}
**Button hinzufügen**

Ziehe die Komponente **Button** aus **Steuerelemente** auf die Seite.
{% endstep %}

{% step %}
**Komponente benennen**

Ninox erstellt die **Bezeichnung** und den **Internen Namen** automatisch. Passe beide Werte bei Bedarf an.
{% endstep %}

{% step %}
**Button-Komponente konfigurieren**

Lege unter **Allgemein** in **Beim Klicken** Logik für eine Aktion fest.\
Definiere unter **Anzeige** das Aussehen des Buttons.
{% endstep %}

{% step %}
**Funktion prüfen**

Prüfe, ob der Button wie erwartet aussieht und die konfigurierte Logik ausführt.
{% endstep %}
{% endstepper %}

## **Einstellungen der Button-Komponente**

Unter **Einstellungen** kannst du Folgendes konfigurieren:

* **Bezeichnung** zeigt den Titel der Komponente.
* **Interner Name** wird automatisch ausgefüllt. Ändere ihn nur bei Bedarf. Verwende in Skripten den **Internen Namen**, nicht die **Bezeichnung**.

Unter <i class="fa-memo">:memo:</i> **Allgemein**

* **Beim Klicken** speichert die Logik oder das Ninox Skript. Es wird ausgeführt, wenn Nutzer auf diesen Button klicken.

Klicke auf **Beim Klicken** <i class="fa-code-simple">:code-simple:</i>, um den [Funktionen des Logik-Editors](/ninox-scripting/de/automate-your-workflows/explore-core-scripting-elements/logic-editor-features.md) zu öffnen. Dort kannst du direkt ein Skript hinzufügen oder **Ninox AI** verwenden, um eines zu erstellen.

{% hint style="info" %}
Skripte werden clientseitig ausgeführt. Sie können einen Datensatz aus einer Ansicht öffnen, eine Tabellenansicht öffnen oder einen Dialog oder eine Nachricht anzeigen.
{% endhint %}

Unter <i class="fa-airplay">:airplay:</i> **Anzeige**

* **Farbe** legt das Farbschema für den Button fest.
* **Variante** steuert das visuelle Gewicht des Buttons. Verwende **Durchgezogen** zur Hervorhebung, **Mit Rahmen** für eine Umrandung oder **Verblasst** für einen zurückhaltenden Stil.
* **Größe** steuert die Abmessungen des Buttons. Verwende kleinere Größen für kompakte Layouts und größere Größen für hervorgehobene Aktionen.
* **Symbol links** und **Symbol rechts** fügen vor oder nach der Button-Beschriftung ein Symbol hinzu.
* **Außenabstand** fügt Abstand um den Button hinzu.

Für jede der oben genannten Einstellungen kannst du Logik festlegen, statt eine vordefinierte Option auszuwählen. Klicke dafür auf <i class="fa-code-simple">:code-simple:</i>.

Unter <img src="https://567870020-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV9tcO6xebBWxh5RucsPi%2Fuploads%2FFiprUAekbvjlFlF0IopN%2Frule_settings_icon.png?alt=media&amp;token=63862f42-cf3e-4cd2-9463-7ee563d0cad3" alt="" data-size="line"> **Verhalten**:

* **Deaktiviert** macht den Button nicht verfügbar. Nutzer können nicht darauf klicken.\
  Lege Logik für das Deaktivieren fest, indem du auf <i class="fa-code-simple">:code-simple:</i> klickst.

Unter <i class="fa-eye">:eye:</i> **Sichtbarkeit**:

* **Sichtbar** und **Ausgeblendet** legen fest, ob der Button im Formular erscheint.
* **Bedingt** ermöglicht dir, eine **Sichtbarkeitsbedingung** festzulegen. Sie steuert, wann dieser Button angezeigt oder ausgeblendet wird.


---

# 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.ninox.com/builder-hub/de/visualize-and-organize-your-data/create-and-customize-pages/button-component.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.