Configuration

An object defining configuration options for the Button widget.

accessKey

Specifies the shortcut key that sets focus on the widget.

Type: String
Default Value: null

The value of this option will be passed to the accesskey attribute of the HTML element that underlies the 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:
AngularJS
Knockout
jQuery

disabled

Specifies whether the widget responds to user interaction.

Type: Boolean
Default Value: false

Show Example:
AngularJS
Knockout
jQuery

elementAttr

Specifies the attributes to be attached to the widget's root element.

Type: Object
Default Value: {}

When you configure this option in an ASP.NET MVC Control, pass a dictionary as shown in the following code.

Razor C#
Razor VB
@(Html.DevExtreme()
    // other widget options
    // ...
    .ElementAttr(new Dictionary<string, object>() {
        { "id", "elementId" },
        { "class", "class-name" },
        // ...
    })
)
@(Html.DevExtreme().WidgetName() _
    .ElementAttr(New Dictionary(Of String, Object) From {
        { "id", "elementId" },
        { "class", "class-name" }
    })
)

focusStateEnabled

Specifies whether the widget can be focused using keyboard navigation.

Type: Boolean
Default Value: false
Default for generic: true

height

Specifies the height of the widget.

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

This option accepts a value of one of the following types.

  • Number
    The height of the widget in pixels.

  • String
    A CSS-accepted measurement of height. For example, "55px", "80%", "auto", "inherit".

  • Function
    A function returning either of the above. For example:

    JavaScript
    height: function() {
        return window.innerHeight / 1.5;
    }

hint

Specifies text for a hint that appears when a user pauses on the widget.

Type: String
Default Value: undefined

hoverStateEnabled

Specifies whether the widget changes its state when a user pauses on it.

Type: Boolean
Default Value: true

icon

Specifies the icon to be displayed on the button.

Type: String
Default Value: ''

This option accepts the name of an icon from the built-in icon library, a path to the icon image, or a CSS class of an icon stored in an external icon library. For information on using external icon libraries, refer to the Icon Library article.

View Demo

Show Example:
AngularJS
Knockout
jQuery

iconSrc

Deprecated

Use the icon option instead.

onClick

A handler for the click event.

Type: function |String
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element. Available only in the Knockout approach.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused action execution.
validationGroup: Object
Specifies the object representing the validation group to which the button is related.
Default Value: null

Assign a function to perform a custom action when the widget is clicked.

When using DevExtreme SPA Framework, you can navigate to a specific URL on click. For this, assign this URL or its anchor part (#) directly to this option.

To validate the editors that are related to the validation group specified for this button, use the validationGroup field of the object passed as the event handler's parameter. The validationGroup object has the following structure.

  • group
    The name or object of the validation group that is assigned to the button's validationGroup option.
  • validators
    An array of Validator widgets that are included to the validation group.
  • validate()
    The method that allows you to validate the widgets included in the validation group.
  • validated
    The event that occurs after the group is validated. You can attach/detach a handler using the on(eventName, eventHandler)/off(eventName) methods of the group.
Show Example:
AngularJS
Knockout
jQuery

onDisposing

A handler for the disposing event. Executed when the widget is removed from the DOM using the remove(), empty(), or html() jQuery methods only.

Type: function
Function parameters:
e: Object
Information about the event.
Object structure:
component: Object
The widget instance.
element: jQuery
The widget's container.
model: Object
The model data. Available only if you use Knockout.
Default Value: null

onInitialized

A handler for the initialized event. Executed when the widget is initialized.

Type: function
Function parameters:
e: Object
Information about the event.
Object structure:
component: Object
The widget instance.
element: jQuery
The widget's container.
Default Value: null

onOptionChanged

A handler for the optionChanged event. Executed after an option of the widget is changed.

Type: function
Function parameters:
e: Object
Information about the event.
Object structure:
component: Object
The widget instance.
name: String
A short name of the option whose value has been changed.
fullName: String
A full name of the option whose value has been changed; contains a full hierarchy of the option.
value: any
A new value for the option.
element: jQuery
The widget's container.
model: Object
The model data. Available only if you use Knockout.
Default Value: null

rtlEnabled

Switches the widget to a right-to-left representation.

Type: Boolean
Default Value: false

When this option is set to true, the widget text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

JavaScript
DevExpress.config({
    rtlEnabled: true
});

tabIndex

Specifies the number of the element when the Tab key is used for navigating.

Type: Number
Default Value: 0

The value of this option will be passed to the tabindex attribute of the HTML element that underlies the widget.

template

A template to be used for rendering the Button widget.

Type: template
Function parameters:
buttonData: Object
An object holding the button data.
Object structure:
text: String
The button's text.
icon: String
The button's icon.
contentElement: jQuery
The jQuery object of the button content element.
Return Value: String|jQuery
A template name or a template container.
Default Value: 'content'

This option enables you to render a widget depending on the values of the field of the template context object or view model fields.

HTML
<div data-bind="dxButton: { template: 'myButton'}">
    <div data-options="dxTemplate: { name:'myButton' }">
        <span data-bind="dxLoadIndicator: { visible: $parent.isLoading }"></span>
        <span>Load</span>
    </div>
</div>
NOTE
A binding context of a template contains only fields listed in the Default Template topic. So, you can bind template elements to these fields directly. To access another binding context within a template, use the Knockout/AngularJS binding variables.

text

The text displayed on the button.

Type: String
Default Value: ''

Show Example:
AngularJS
Knockout
jQuery

type

Specifies the button type.

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

DevExtreme provides the following button types.

Button Types

When using a widget as an ASP.NET MVC Control, specify this option using the ButtonType enum. This enum accepts the following values: Normal, Default, Back, Danger and Success.

View Demo

Show Example:
AngularJS
Knockout
jQuery

useSubmitBehavior

Specifies whether or not the button must submit an HTML form.

Type: Boolean
Default Value: false

If you set this option to true, a click on the button will validate and submit the HTML form in which the button is nested, no further configuration required. Note that the click event handler will be executed first.

View Demo

validationGroup

Specifies the name of the validation group to be accessed in the click event handler.

Type: String
Default Value: undefined

When using a button to validate several editors on a page, the button must "know" in which validation group these editors are located. If the Knockout or AngularJS approach is used, add the button to the div element that represents the target validation group. When using the jQuery approach, specify the validationGroup configuration option for the button. Assign the validation group name specified for the validationGroup option of the validators that extend the editors to be validated.

See Also

visible

Specifies whether 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 width of the widget.
Default Value: undefined

This option accepts a value of one of the following types.

  • Number
    The width of the widget in pixels.

  • String
    A CSS-accepted measurement of width. For example, "55px", "80%", "auto", "inherit".

  • Function
    A function returning either of the above. For example:

    JavaScript
    width: function() {
        return window.innerWidth / 1.5;
    }