---
title: "au-widget-button/IButtonConfig | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-button.IButtonConfig/"
---

# au-widget-button/IButtonConfig

> Provides button properties.

## Interfaces

### IButtonConfig

The following example illustrates how you can define a [button](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-button.au-widget-button.md#auwidgetbutton) that navigates to the next step in the editor.
```json
{
  "widgets": [
   {
     "type": "button",
     "name": "next-btn",
     "params": {
       "text": "Next",
       "onClick": "{{#function main.nextStep()}}",
       "classStyle": "primary"
     }
   }
 ]
}
```

#### Properties

##### classStyle

```ts
classStyle: string;
```

The button style. The following styles are available: `primary`, `success`, `warning`, and `danger`.

##### enabled

```ts
enabled: boolean;
```

Defines whether the button is clickable, `true` or `false`.

##### icon

```ts
icon: string;
```

The ID of an SVG icon defined in the UI theme.

##### iconPosition

```ts
iconPosition: IconPosition;
```

Position of icon image

##### image

```ts
image: string;
```

URL to the button image.

##### onClick

```ts
onClick: Function | Function[];
```

A single function or an array of functions that will be executed when the button is clicked.

##### text

```ts
text: string;
```

The button caption.

##### type

```ts
type: string;
```

The button type: `text` or `image`.

##### visible

```ts
visible: boolean;
```

Defines whether the button is visible, `true` or `false`.

## Type Aliases

### IconPosition

```ts
type IconPosition = "left" | "right";
```