Button Configuration

An object defining configuration options for the dxButton widget.

activeStateEnabled

A Boolean value specifying whether or not the widget changes its state when interacting with a user.

Type: Boolean
Default Value: true

This option is used when the widget is displayed on a platform whose guidelines include the active state change for widgets.

Show Example:
jQuery
<div class="button" data-bind="dxButton: {text: 'Click me', clickAction: buttonClicked, activeStateEnabled: enableActiveState }"></div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Active state</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: enableActiveState }"></div>
  </div>
</div>
enableActiveState = ko.observable(true);
buttonClicked = function () {
  DevExpress.ui.notify("Button clicked", "success", 1000);
}
body{
  text-align: center;
}
.button{
  margin: 10px;
}

clickAction

An action performed when a widget is clicked.

Type: Action
Default Value: null

Show Example:
jQuery
<div class="button" data-bind="dxButton: {text: 'Click me', clickAction: processClick }"></div>
processClick = function (e) {
  DevExpress.ui.notify("The widget has been clicked", "info", 1000);
}
body{
  text-align: center;
}
.button{
  margin: 10px;
}

disabled

A Boolean value specifying whether or not the widget can respond to user interaction.

Type: Boolean
Default Value: false

Create an observable variable and assign it to this option to specify the availability of the widget at runtime.

Show Example:
jQuery
<div class="button" data-bind="dxButton: {text: 'Click me', disabled: buttonDisabled}"></div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Disabled</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: buttonDisabled }"></div>
  </div>
</div>
buttonDisabled = ko.observable(false);
body{
  text-align: center;
}
.button{
  margin: 10px;
}

height

Specifies the height of the widget.

Type: Number|String|function
Return Value: Number|String
The widget height.
Default Value: undefined

The option can hold the following types of values.

  • numeric - the height of the widget in pixels
  • string - a CSS measurement of the widget height (e.g., "55px", "80%", "auto" and "inherit")
  • function - a function returning the widget height (e.g., height:function(){ return baseHeight - 10 + "%"; })

icon

The name of an icon to be displayed on the button.

Type: String
Default Value: ""

This option can take on the name of an icon from the built-in icon library.

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Click me', icon: buttonIcon }"></div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Icon</div>
    <div class="dx-field-value" data-bind="dxSelectBox: { dataSource: iconsDataSource, value: buttonIcon }"></div>
  </div>
</div>
buttonIcon = ko.observable("");
iconsDataSource = new DevExpress.data.DataSource({
    store: [],
    paginate: false,
    map: function (item) {
        return item.name;
    }
});
$.get("/Content/data/icons_ext.txt", function (data) {
    for (var i = 0; i < data.length; i++) {
        iconsDataSource.store().insert(data[i]);
    }
    iconsDataSource.load();
}, "json");
body{
  text-align: center;
}
.button{
  margin: 10px;
}

iconSrc

A URL pointing to the image to be displayed on the button.

Type: String
Default Value: ""

text

The text displayed on the button.

Type: String
Default Value: ""

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: buttonText }"></div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Text</div>
    <div class="dx-field-value" data-bind="dxTextBox: { value: buttonText }"></div>
  </div>
</div>
buttonText = ko.observable("Click me");
body{
  text-align: center;
}
.button{
  margin: 10px;
}

type

Specifies the button type.

Type: String
Default Value: 'normal'
Accepted Values: 'normal'|'default'|'back'|'danger'|'success'

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Click me', type: buttonType }"></div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Type</div>
    <div class="dx-field-value" data-bind="dxLookup: { dataSource: buttonTypes, value: buttonType }"></div>
  </div>
</div>
buttonTypes = ["normal", "back", "danger", "success"];
buttonType = ko.observable(buttonTypes[0]);
body{
  text-align: center;
}
.button{
  margin: 10px;
}

visible

A Boolean value specifying whether or not the widget is visible.

Type: Boolean
Default Value: true

width

Specifies the width of the widget.

Type: Number|String|function
Return Value: Number|String
The widget width.
Default Value: undefined

The option can hold the following types of values.

  • numeric - the widget width in pixels
  • string - a CSS measurement of the widget width (e.g., "55px", "80%", "auto" and "inherit")
  • function - the function returning the widget width (e.g., width:function(){ return baseWidth - 10 + "%"; })