---
title: "Button | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/admin-guide/workflows/ui-framework/widgets/button/"
---

# Button

> This widget displays a button. You can define button text, select the button style, and set the actions to be performed when the button is clicked. By clicking the button, you can implement code or manage other widgets.

As for the appearance, the button widget shows text and has several color styles.

```json
{
  "name": "my-button",
  "type": "button",
  "params": {...}
}
```

## Text

This is a button without functions added to a main panel.

![Simple Button](./images/button_1.gif)

```json
{
  "name": "my-button",
  "type": "button",
  "params": {
    "text": "Click me"
  }
}
```

## Button styles

You can select one of the predefined button styles that mostly differ in their color. By default, buttons are displayed in the colors of the primary UI theme. You can also select a color corresponding to a successful action or a secondary color set. Just use the `success` and `secondary` values in the `classStyle` param.

### Success style

![Button with Success Style](./images/button-success.gif)

```json
{
  "name": "my-button",
  "type": "button",
  "params": {
    "text": "Click me",
    "classStyle": "success"
  }
}
```

### Secondary style

![Button with Secondary Style](./images/button-secondary.gif)

```json
{
  "name": "my-button",
  "type": "button",
  "params": {
    "text": "Click me",
    "classStyle": "secondary"
  }
}
```

## Enabled

The `enabled` property defines if the button is clickable or not. In this example, we make the button clickable depending on the checkbox value. If selected, the button will be clickable. Here, we use a dynamic expression returning the checkbox value.

![Button enabled](./images/button-enabled.gif)

```json
{
  "name": "my-button",
  "type": "button",
  "params": {
    "text": "Click me",
    "classStyle": "primary",
    "enabled": "{{$['checkbox']._ }}"
  }
}
```

## Visible

The `visible` property defines the button visibility in the user interface.

In this example, we will also display the button depending on the checkbox value. In the dynamic expression for the `visible` param, we invert the checkbox value. This expression means that the button will be visible if the checkbox isn't selected and vice versa.

![Button Visible](./images/button-visible.gif)

```json
{
  "name": "my-button",
  "type": "button",
  "params": {
    "text": "Click me",
    "classStyle": "primary",
    "visible": "{{!$['checkbox']._ }}"
  }
}
```

## Events

A button allows you to handle the `onClick` event. You can define one or more functions to be performed when the user clicks the button.

In this example, the checkbox is selected on the button click.

![Button OnClick](./images/button-onClick.gif)

```json
{
  "name": "my-button",
  "type": "button",
  "params": {
    "text": "Select the checkbox",
    "onClick":"{{#function $['checkbox'].value = true}}"
  }
}
```

## Params

| Name | Type | Description | Default meaning |
|--|--|--|--|
| `classStyle`| `"primary"`\|`"success"`\|`"secondary"`| defining a button color | `"primary"` |
| `text`| string| adding text to a button| empty string|
| `enabled`| boolean| making a button clickable| `true`|
| `visible`| boolean| making a button visible| `true`|
| `onClick`| a function `"{{#function ...}}"` or array of functions `["{{#function ...}}","{{#function ...}}", ...]`| calling a function| undefined |