DevExtreme React - 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
$(function() { $("#buttonContainer").dxButton({ type: "default", // or "normal" | "back" | "danger" | "success" text: "Delete", onClick: function (e) { // ... } }); });
Angular
<dx-button text="Delete" (onClick)="foo($event)" type="default"> <!-- or "normal" | "back" | "danger" | "success" --> </dx-button>
import { DxButtonModule } from "devextreme-angular"; // ... export class AppComponent { foo (e) { // ... } } @NgModule({ imports: [ // ... DxButtonModule ], // ... })
Vue
<template> <dx-button text="Click me" @click="foo" type="default" /> <!-- or "normal" | "back" | "danger" | "success" --> </template> <script> import DxButton from "devextreme-vue/button"; export default { components: { DxButton }, methods: { foo: function(e) { // ... } } } </script>
React
import React from 'react'; import { Button } from 'devextreme-react/button'; class App extends React.Component { render() { return ( <Button type="default" text="Delete" onClick={this.foo} /> ); } foo(e) { // ... } } export default App;
Apart from plain text, the Button can display an icon. DevExtreme provides built-in icons that change their appearance depending on the platform. Alternatively, you can use an external icon library or standalone icons. To specify the icon, set the icon option.
jQuery
$(function() { $("#buttonContainer").dxButton({ type: "danger", text: "Delete", icon: "remove", onClick: function (e) { // ... } }); });
Angular
<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 ], // ... })
Vue
<template> <dx-button text="Delete" @click="foo" type="danger" icon="remove" /> </template> <script> import DxButton from "devextreme-vue/button"; export default { components: { DxButton }, methods: { foo: function(e) { // ... } } } </script>
React
import React from 'react'; import { Button } from 'devextreme-react/button'; class App extends React.Component { render() { return ( <Button type="danger" text="Delete" icon="remove" onClick={this.foo} /> ); } foo(e) { // ... } } export default App;
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
$(function() { $("#buttonContainer").dxButton({ text: "Refresh", template: function (e) { return $("<i />").text(e.buttonData.text) .css("color", "green"); }, onClick: function (e) { // ... } }); });
Angular
<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 ], // ... })
Vue
<template> <dx-button text="Refresh" @click="foo" template="buttonTemplate"> <i slot="buttonTemplate" slot-scope="buttonData" style="color: green"> {{ buttonData.text }} </i> </dx-button> </template> <script> import DxButton from "devextreme-vue/button"; export default { components: { DxButton }, methods: { foo: function(e) { // ... } } } </script>
React
import React from 'react'; import { Button } from 'devextreme-react/button'; class App extends React.PureComponent { render() { return ( <Button text="Refresh" onClick={this.foo} render={(buttonData) => <i style={{ color: 'green' }}>{buttonData.text}</i> } /> ); } foo(e) { // ... } } export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.