> 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/visualize-and-organize-your-data/create-and-customize-pages/button-component.md).
# Button component
Use Button for actions on the page or anywhere in your app.
Add a **Button** component to execute logic with a click. Logic can navigate users within your app or open tables, records, and other pages. Use [Work with functions](/ninox-scripting/automate-your-workflows/work-with-functions.md) to calculate figures, summarize data, and more.
## **Add a Button to a page**
{% stepper %}
{% step %}
**Open the Add tab**
In the **Settings** panel, open the **Add** tab.
{% endstep %}
{% step %}
**Add a Button**
Under **Controls**, drag **Button** onto the page.
{% endstep %}
{% step %}
**Label the component**
Ninox generates the **Label** and the **Internal name** automatically. Update both values if needed.
{% endstep %}
{% step %}
**Configure the Button component**
Under **General**, set logic in **On click** to execute an action.\
Define the button's appearance under **Display**.
{% endstep %}
{% step %}
**Check that it works properly**
Check that the button looks as expected and executes the configured logic.
{% endstep %}
{% endstepper %}
## **Button component settings**
Under **Settings**, you can configure:
* **Label**: the title shown on the component.
* **Internal name**: filled automatically. Change it only when needed. Use the **Internal name** in scripts, not the **Label**.
Under :memo: **General**
* **On click**: stores the logic or Ninox Script that runs when users click this Button.
Click **On click** :code-simple: to open the [Logic editor features](/ninox-scripting/automate-your-workflows/explore-core-scripting-elements/logic-editor-features.md). There, you can add a script directly or use **Ninox AI** to help generate one.
{% hint style="info" %}
Scripts run client-side. They can open a record from a view, open a table view, or show a dialog or message.
{% endhint %}
Under :airplay: **Display**
* **Color** lets you choose a color theme for the button.
* **Variant** controls the button's visual weight. Use **Solid** for emphasis, **Bordered** for an outline, or **Faded** for a subdued style.
* **Size** controls the button's dimensions. Use a smaller size for compact layouts and a larger size for prominent actions.
* **Left icon** and **Right icon** add an icon before or after the button label.
* **Margin** adds space around the button.
For each setting above, you can set logic instead of choosing a predefined option. Click :code-simple:.
Under 
**Behavior**:
* **Disabled** makes the button read-only and prevents users from clicking it.\
To control this setting with logic, click :code-simple:.
Under :eye: **Visibility**:
* **Visible**, **Hidden**: control whether the Button appears on the form.
* **Conditional**: lets you define a **Visibility condition** that controls when this Button is shown or hidden.
---
# 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/visualize-and-organize-your-data/create-and-customize-pages/button-component.md?ask=&goal=
```
`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.