Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss

Overview

The Button widget is a simple button that performs specified commands when a user clicks it.

View Demo

The following code adds a simple Button to your page.

jQuery
HTML
JavaScript
<div id="buttonContainer"></div>
$(function () {
    $("#buttonContainer").dxButton({
        text: "OK",
        onClick: function (e) { 
            DevExpress.ui.notify("The OK button was clicked");
        }
    });
});
Angular
HTML
TypeScript
<dx-button
    text="OK"
    (onClick)="okClicked($event)">
</dx-button>
import { DxButtonModule } from "devextreme-angular";
import notify from "devextreme/ui/notify";
// ...
export class AppComponent {
    okClicked (e) {
        notify("The OK button was clicked")
    }
}
@NgModule({
    imports: [
        // ...
        DxButtonModule
    ],
    // ...
})
Vue
<template>
    <DxButton
        text="Click me"
        @click="okClicked" />
</template>
<script>
import DxButton from "devextreme-vue/button";
import notify from "devextreme/ui/notify";

export default {
    components: {
        DxButton
    },
    methods: {
        okClicked: function(e) {
            notify("The OK button was clicked");
        }
    }
}
</script>
React
import React from 'react';
import { Button } from 'devextreme-react/button';
import notify from 'devextreme/ui/notify';

class App extends React.Component {
    render() {
        return (
            <Button
                text="OK"
                onClick={this.okClicked}
            />
        );
    }

    okClicked(e) {
        notify('The OK button was clicked');
    }
}

export default App;

In the previous code, the click event is handled using the onClick option. Alternatively, you can attach one or several handlers to this event using the on(eventName, eventHandler) method. This approach is more typical of jQuery.

JavaScript
const clickHandler1 = function (e) {
    // First handler of the "click" event
};

const clickHandler2 = function (e) {
    // Second handler of the "click" event
};

$("#buttonContainer").dxButton("instance")
    .on("click", clickHandler1)
    .on("click", clickHandler2);

The appearance of the Button is predefined by its type. Find more on this and other properties that impact the widget appearance in the Customize the Appearance article.

See Also