All docs
V20.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

ButtonItem

Configures a button form item.

Type:

Object

A button form item, as the name implies, consists of a button that does a custom action. You can customize the button's appearance and position on the form.

View Demo

buttonOptions

Configures the button.

Default Value: undefined

See the Button configuration for properties that you can specify in this object.

jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        // ...
        items: [{
            itemType: "button",
            buttonOptions: {
                text: "Do Something",
                type: "success",
                onClick: function () {
                    // Implement your logic here
                }
            }
        }, 
        // ...
        ]
    });
});
Angular
HTML
TypeScript
<dx-form ...>
    <dxi-item
        itemType="button"
        [buttonOptions]="buttonOptions">
    </dxi-item>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    buttonOptions = {
        text: "Do Something",
        type: "success",
        onClick: function () {
            // Implement your logic here
        }
    };
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxForm ...>
        <DxItem
            :button-options="buttonOptions"
            item-type="button"
        />
    </DxForm>
</template>
<script>
import DxForm, { DxItem } from 'devextreme-vue/form';

export default {
    components: {
        DxForm,
        DxItem
    },
    data() {
        return {
            buttonOptions: {
                text: "Do Something",
                type: "success",
                onClick: function () {
                    // Handle the button click here
                }
            }
        };
    }
}
</script>
React
App.js
import React from 'react';
import Form, { Item } from 'devextreme-react/form';

const buttonOptions = {
    text: "Do Something",
    type: "success",
    onClick: function () {
        // Handle the button click here
    }
};

const App = () => {
    return (
        <Form>
            <Item itemType="button" buttonOptions={buttonOptions} />
        </Form>
    );
};    

export default App;
NOTE
In Angular and Vue, the nested component that configures the buttonOptions property does not support event bindings and two-way property bindings.

colSpan

Specifies how many columns the item spans.

Type:

Number

Default Value: undefined

cssClass

Specifies a CSS class to be applied to the item.

Type:

String

Default Value: undefined

horizontalAlignment

Specifies the button's horizontal alignment.

Type:

String

Default Value: 'right'
Accepted Values: 'center' | 'left' | 'right'

Use the HorizontalAlignment enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Left, Right, and Center.

itemType

Specifies the item's type. Set it to "button" to create a button item.

Type:

String

Default Value: 'simple'
Accepted Values: 'empty' | 'group' | 'simple' | 'tabbed' | 'button'

name

Specifies the item's identifier.

Type:

String

Default Value: undefined

Use this name to access the form item in the itemOption(id) and getButton(name) methods.

verticalAlignment

Specifies the button's vertical alignment.

Type:

String

Default Value: 'top'
Accepted Values: 'bottom' | 'center' | 'top'

Use the VerticalAlignment enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Bottom, Center, and Top.

visible

Specifies whether the item is visible.

Type:

Boolean

Default Value: true

visibleIndex

Specifies the item's position regarding other items in a group, tab, or the whole UI component.

Type:

Number

Default Value: undefined

Form items without the specified visibleIndex follow the items with it, and they are sorted alphabetically.