React Button - Getting Started

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your Angular, Vue, React, or jQuery application.

This tutorial shows how to add a Button to a page, apply styling, and configure its core features. As a result, you will create the following UI component:

Refer to the following sections for information on each configuration step. The full code is available in the following GitHub repository: getting-started-with-button.

Create a Button

jQuery

Add DevExtreme to your jQuery application and use the following code to create a Button:

index.js

index.html

$(function() {
    $("#button").dxButton({
        text: "Click me!"
    });
});

<html>
    <head>
        <!-- ... -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.2.12/css/dx.common.css">
        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.2.12/css/dx.light.css">
        <link rel="stylesheet" href="index.css">

        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.2.12/js/dx.all.js"></script>
    </head>
    <body class="dx-viewport">
        <div id="button"></div>
    </body>
</html>

Angular

Add DevExtreme to your Angular application and use the following code to create a Button:

app.component.html

app.component.ts

app.module.ts

<dx-button
    text="Click me!">
</dx-button>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent { }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { DxButtonModule } from 'devextreme-angular';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxButtonModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

Add DevExtreme to your Vue application and use the following code to create a Button:

App.vue

<template>
    <DxButton
        text="Click me!"
    />
</template>

<script>
import DxButton from 'devextreme-vue/button';

export default {
    name: 'App',
    components: {
        DxButton
    }
}
</script>

React

Add DevExtreme to your React application and use the following code to create a Button:

App.js

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import { Button } from 'devextreme-react/button';

function App() {
    return (
        <div className="App">
            <Button
                text="Click me!"
            />
        </div>
    );
}

export default App;

Handle the Click Event

To respond to user clicks, write an onClick handler. The example used in this tutorial displays a toast message:

jQuery

index.js

$(function() {
    $("#button").dxButton({
        // ...
        onClick: function() {
            DevExpress.ui.notify("The button was clicked");
        } 
    });
});

Angular

app.component.html

app.component.ts

<dx-button ...
    (onClick)="showMessage()">
</dx-button>

import { Component } from '@angular/core';
import notify from 'devextreme/ui/notify';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    showMessage = () => {
        notify("The button was clicked");
    }
}

Vue

App.vue

<template>
    <DxButton ...
        @click="showMessage()"
    />
</template>

<script>
import DxButton from 'devextreme-vue/button';
import notify from 'devextreme/ui/notify';

export default {
    name: 'App',
    components: {
        DxButton
    },
    methods: {
        showMessage() {
            notify("The button was clicked");
        }
    }
}
</script>

React

App.js

// ...
import notify from 'devextreme/ui/notify';

function showMessage() {
    notify("The button was clicked");
}

function App() {
    return (
        <div className="App">
            <Button ...
                onClick={showMessage}
            />
        </div>
    );
}

export default App;

Stylize the Button

You can use the type property to apply predefined color schemes to Buttons. You can also use the stylingMode property to customize the fill and borders. Refer to the Predefined Types demo for more information about these properties.

jQuery

index.js

$(function() {
    $("#button").dxButton({
        // ...
        type: "success",
        stylingMode: "outlined"
    });
});

Angular

app.component.html

<dx-button ...
    stylingMode="outlined"
    type="success">
</dx-button>

Vue

App.vue

<template>
    <DxButton ...
        styling-mode="outlined"
        type="success"
    />
</template>

React

App.js

// ...

function App() {
    return (
        <div className="App">
            <Button ...
                stylingMode="outlined"
                type="success"
            />
        </div>
    );
}

export default App;

Add an Icon

Use the icon property to add a glyph to the button. You can load a custom icon or display one of the ready-to-use images from different image sources. The sample below shows how to use a glyph from the DevExtreme library:

jQuery

index.js

$(function() {
    $("#button").dxButton({
        // ...
        icon: "comment"
    });
});

Angular

app.component.html

<dx-button ...
    icon="comment">
</dx-button>

Vue

App.vue

<template>
    <DxButton ...
        icon="comment"
    />
</template>

React

App.js

// ...

function App() {
    return (
        <div className="App">
            <Button ...
                icon="comment"
            />
        </div>
    );
}

export default App;

For more information on this UI component, refer to the following resources: