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.

Properties

Name	Type	Description
name	string	Component name

Methods

Name	Parameters	Returns	Description
click	event?: any	void	Trigger click event. Optional event object can be passed
setDisabled	disabled: boolean	void	Disable or enable the component
setUrl	url: string, queryParams?: object	void	Set the URL setting with optional query parameters

Triggers

Name	Description
On Click	Triggered when the component is clicked
On Init	Triggered when the component is initialized

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👇

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

   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.

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

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

You can manage the button when it's hidden via the App state tab in the left side panel.

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:

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

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

Use case: Adding navigation with a button

Adding navigation to application | UI Bakery Docsdocs.uibakery.io

---

You can also check out the articles below for examples of using the Button component inside the Table👇

• Adding an Action button to the Table

• Hiding a Table button based on condition