DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Free Trial Buy

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

alignment Deprecated

Use the horizontalAlignment instead.

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.

buttonOptions

Configures the button.

Type:

Button Configuration

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
    ],
    // ...
})
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'

See Also

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.