# 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="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2Fo8xFeJM84AeyNf0RSFPK%2FCleanShot%202025-07-16%20at%2012.47.35%402x-min.png?alt=media&#x26;token=e1302ad4-95da-49b1-a9dd-ec6a77e26be7" 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="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FtndjWKpecdhbdjwavsfI%2FCleanShot%202025-07-22%20at%2013.59.45%402x-min.png?alt=media&#x26;token=0aaa64a4-7275-40d6-894b-f0054fd00124" 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.

![](https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FPkVO9j4GWDRWoYrMskIx%2FCleanShot%202025-07-22%20at%2013.56.24%402x-min.png?alt=media\&token=06d95b4f-00f0-4361-b015-6380b11ae1cc)
{% 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](https://docs.uibakery.io/reference/working-with-components/broken-reference)
* [Hiding a Table button based on condition](https://docs.uibakery.io/reference/working-with-components/broken-reference)