@aurigma/ui-framework/docs/reference/interfaces/ibuttonconfig.md

A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.

# Interface: IButtonConfig

Provides button properties.

The following example illustrates how you can define a [button](../classes/auwidgetbutton.md) that navigates to the next step in the editor.
```
{
  "widgets": [
   {
     "type": "button",
     "name": "next-btn",
     "params": {
       "text": "Next",
       "onClick": "{{#function main.nextStep()}}",
       "classStyle": "primary"
     }
   }
 ]
}
```

## Hierarchy

* **IButtonConfig**

## Index

### Properties

* [classStyle](ibuttonconfig.md#classstyle)
* [enabled](ibuttonconfig.md#enabled)
* [icon](ibuttonconfig.md#icon)
* [iconPosition](ibuttonconfig.md#iconposition)
* [image](ibuttonconfig.md#image)
* [onClick](ibuttonconfig.md#onclick)
* [text](ibuttonconfig.md#text)
* [type](ibuttonconfig.md#type)
* [visible](ibuttonconfig.md#visible)

## Properties

###  classStyle

• **classStyle**: *string*

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

___

###  enabled

• **enabled**: *boolean*

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

___

###  icon

• **icon**: *string*

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

___

###  iconPosition

• **iconPosition**: *[IconPosition](../README.md#iconposition)*

Position of icon image

___

###  image

• **image**: *string*

URL to the button image.

___

###  onClick

• **onClick**: *Function | Array‹Function›*

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

___

###  text

• **text**: *string*

The button caption.

___

###  type

• **type**: *string*

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

___

###  visible

• **visible**: *boolean*

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