DevExtreme Vue - Customize the Appearance

The Button widget provides five predefined appearances controlled by the type option. The type can be "normal", "default", "back", "danger" or "success". Choose the proper type depending on the commands that the Button performs.

jQuery
JavaScript
$(function() {
    $("#buttonContainer").dxButton({
        type: "danger", // or "normal" | "back" | "danger" | "success"
        text: "Delete",
        onClick: function (e) {
            // ...
        }
    });
});
Angular
HTML
TypeScript
<dx-button
    text="Delete"
    (onClick)="foo($event)"
    type="danger"> <!-- or "normal" | "back" | "danger" | "success" -->
</dx-button>
import { DxButtonModule } from 'devextreme-angular';
// ...
export class AppComponent {
    foo (e) {
        // ...
    }
}
@NgModule({
    imports: [
        // ...
        DxButtonModule
    ],
    // ...
})

View Demo

Apart from plain text, the Button can display an icon. DevExtreme provides built-in icons that change their appearance depending on the platform. Certainly, you can use an external icon library or even standalone icons. To specify the icon, set the icon option.

jQuery
JavaScript
$(function() {
    $("#buttonContainer").dxButton({
        type: "danger",
        text: "Delete",
        icon: "remove",
        onClick: function (e) {
            // ...
        }
    });
});
Angular
HTML
TypeScript
<dx-button
    text="Delete"
    (onClick)="foo($event)"
    type="danger"
    icon="remove">
</dx-button>
import { DxButtonModule } from 'devextreme-angular';
// ...
export class AppComponent {
    foo (e) {
        // ...
    }
}
@NgModule({
    imports: [
        // ...
        DxButtonModule
    ],
    // ...
})

View Demo

If you need to define the Button content completely, implement a template for it using the template option as shown in the following example.

jQuery
JavaScript
$(function() {
    $("#buttonContainer").dxButton({
        text: "Refresh",
        template: function (e) {
            return $("<i />").text(e.buttonData.text)
                             .css("color", "green");
        },
        onClick: function (e) {
            // ...
        }
    });
});
Angular
HTML
TypeScript
<dx-button
    text="Refresh"
    (onClick)="foo($event)"
    [template]="'buttonTemplate'">
    <i *dxTemplate="let buttonData of 'buttonTemplate'" style="color:green">
        {{buttonData.text}}
    </i> 
</dx-button>
import { DxButtonModule } from 'devextreme-angular';
// ...
export class AppComponent {
    foo (e) {
        // ...
    }
}
@NgModule({
    imports: [
        // ...
        DxButtonModule
    ],
    // ...
})
See Also