# Button style

Defines the visual appearance of a button.

The [Button Style JSON schema](https://schemas.acrobits.net/core/styles/button.json) defines its structure.

A Button Style is a JSON object with the following properties.

## `labels`

A **required** property that defines the button text for each state. It is a JSON object whose properties correspond to button states and whose values
are [Translation requests](../content-requests/translation-request.md).

| Property | Description                                                                        |
|----------|------------------------------------------------------------------------------------|
| `normal` | Required. Default label.                                                           |
| `active` | Optional. Label for the active state. If omitted, the app uses the `normal` label. |

```json
{
  "labels": {
    "normal": {
      "raw": "Echo test"
    }
  }
}
```

## `tooltip`

A **required** property that defines the tooltip text shown on hover. Its value is a [Translation request](../content-requests/translation-request.md).

```json
{
  "tooltip": {
    "raw": "Echo test"
  }
}
```

## `icons`

An **optional** property that defines the button icon for each UI state. It is a JSON object whose properties correspond to button states and whose values
are [Asset requests](../content-requests/asset-request.md).

| Property   | Description                   |
|------------|-------------------------------|
| `normal`   | Required. Default icon.       |
| `hover`    | Optional. Icon on hover.      |
| `pressed`  | Optional. Icon when pressed.  |
| `active`   | Optional. Icon when active.   |
| `disabled` | Optional. Icon when disabled. |

### Examples

#### Icon from a URL

```json
{
  "icons": {
    "normal": {
      "url": "https://example.com/icon.png"
    }
  }
}
```

#### Icons from the portal theme

```json
{
  "icons": {
    "normal": {
      "android": "call_functions_button_custom_0",
      "ios": "call_functions_button_custom_0",
      "desktop": "desktopth_call_functions_button_custom_0"
    },
    "hover": {
      "android": "call_functions_button_custom_0",
      "ios": "call_functions_button_custom_0",
      "desktop": "desktopth_call_functions_button_custom_0_hover"
    },
    "pressed": {
      "android": "call_functions_button_custom_0",
      "ios": "call_functions_button_custom_0",
      "desktop": "desktopth_call_functions_button_custom_0_hover"
    }
  }
}
```