# Button

## Overview

Button is a simple yet functional component that allows you to call actions, add navigation options, and more. Buttons can be used as standalone components or as building blocks in other components, for example, a modal.

<figure><img src="/files/PPPqOR9plGic7z6tpryv" alt=""><figcaption></figcaption></figure>

### Properties

| Name   | Type     | Description    |
| ------ | -------- | -------------- |
| `name` | `string` | Component name |

### Methods

<table><thead><tr><th width="134.05078125">Name</th><th width="200">Parameters</th><th width="99.5625">Returns</th><th>Description</th></tr></thead><tbody><tr><td><code>click</code></td><td><code>event?: any</code></td><td><code>void</code></td><td>Trigger click event. Optional event object can be passed</td></tr><tr><td><code>setDisabled</code></td><td><code>disabled: boolean</code></td><td><code>void</code></td><td>Disable or enable the component</td></tr><tr><td><code>setUrl</code></td><td><code>url: string</code>, <code>queryParams?: object</code></td><td><code>void</code></td><td>Set the URL setting with optional query parameters</td></tr></tbody></table>

### Triggers

<table><thead><tr><th width="199.78515625">Name</th><th>Description</th></tr></thead><tbody><tr><td><strong>On Click</strong></td><td>Triggered when the component is clicked</td></tr><tr><td><strong>On Double Click</strong></td><td>Triggered when the component is double-clicked</td></tr><tr><td><strong>On Init</strong></td><td>Triggered when the component is initialized</td></tr></tbody></table>

## Working with the component

In this section, we'll describe some of the most popular use cases of the Button component. Check them out below:point\_down:

### Use case: Removing a user from the list

We have the following layout: a *Table* displaying the list of users and a *Detail* component showing the details of the selected user.

1. Add a *Button* to the canvas that will be used to remove users from the list.
2. Next, navigate to the Button's *Triggers* section and create a new action for the **On Click** trigger.
3. Configure the action in the following way:
   1. **First step:**
      1. Select your data source and the *Delete Row* action type.
      2. In the *Filters* section, set the *id* that will be used to delete records:`{{ui.usersTableDetail.value.id}}`&#x20;
   2. **Second step** - Add the *Execute Action* step and select your *loadData* action.

That's it! Now, when you click the Remove button, the selected user will be deleted from the list and the Table will show updated records.

{% @arcade/embed flowId="FDJ57LSIOp0II5AAcsmc" url="<https://app.arcade.software/share/FDJ57LSIOp0II5AAcsmc>" %}

### Use case: Hiding a button based on condition

In some cases, you may need certain actions to be available only based on specific conditions. Let's say you have a list of users and you want the *Reset password* button to be shown only to the Admin. Here's how you can do that:

1. Add a Button to the canvas and give it a name, for example, *Reset password*.
2. Now, scroll down to the *Show condition* settings of the component in the right side panel.
3. In the *Condition* field, specify the required condition, for example, `{{user.role}} === 'admin'`.

<figure><img src="/files/MXQtXI28YCcTt0AR2SMk" alt=""><figcaption></figcaption></figure>

Done! Now, the button will be hidden for all other users, except the ones with the Admin role.

{% hint style="info" %}
You can manage the button when it's hidden via the *App state* tab in the left side panel.

![](/files/2Zbo0zUqaPut2Bhqaxz6)
{% endhint %}

### Use case: Disabling a button based on condition

Another typical example is disabling a button based on a specific condition - for example, the **Activate** button that should be available only for users with the *Inactive* status.

1. Add a Button to the canvas and give it a name, for example, *Activate*.
2. Now, in the Button's settings, locate the **Disabled** field and select the *Yes* option there.
3. Next, switch to the field's JS mode to configure the condition:

```javascript
{{ui.usersTableDetail.value.status == 'Active'}}
```

That's it! Now the button will be disabled for users which already have the *Active* status.

{% @arcade/embed flowId="f2jpmt6B9caIzAXJbQzi" url="<https://app.arcade.software/share/f2jpmt6B9caIzAXJbQzi>" %}

### Use case: Adding navigation with a button

{% embed url="<https://docs.uibakery.io/how-tos/layout-and-navigation/add-navigation-to-application#navigation-using-link-and-button-components>" %}

***

You can also check out the articles below for examples of using the Button component inside the Table:point\_down:

* [Adding an Action button to the Table](broken://pages/HM0dswRocKIxc2JFOWm3#adding-an-action-button-to-the-table)
* [Hiding a Table button based on condition](broken://pages/HM0dswRocKIxc2JFOWm3#hiding-a-button-based-on-a-condition)


---

# Agent Instructions: 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:

```
GET https://docs.uibakery.io/reference/working-with-components/button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.