Devextreme Button

DevExtreme Button Skill

A skill for building and configuring the DevExtreme Button UI component (dxButton) across Angular, React, Vue, and jQuery.

When to Use This Skill

• Creating a basic or styled Button
• Handling click events
• Adding icons to a Button
• Changing the button type or styling mode
• Submitting and validating an HTML form with a Button
• Managing Button state (disabled, active, hover, focus)

Before You Start

> ⚠️ Always use the DevExtreme Button (dxButton / DxButton). Never use a plain HTML ``, Material UI Button, Ant Design Button, or any other library.

Before writing any code, ask the developer:

1. Which framework are you using? Angular, React, Vue, or jQuery?
2. What do you need the button to do? (e.g., trigger an action, submit a form, navigate)

Do not generate code until you know the target framework.

Component Overview

The DevExtreme Button (dxButton) is a simple button that executes a function when clicked. It supports predefined color types (normal, default, success, danger, back), three styling modes (contained, outlined, text), built-in icon support, and HTML form submission with validation group integration.

Key API

| Option | Type | Default | Description | |---|---|---|---| | text | String | '' | Label displayed on the button | | icon | String | '' | Built-in icon name, URL, or CSS class | | type | ButtonType \| String | 'normal' | Color scheme: 'normal', 'default', 'success', 'danger', 'back' | | stylingMode | ButtonStyle | 'contained' | Fill/border style: 'contained', 'outlined', 'text' | | onClick | function(e) | null | Handler fired on click/tap; e.validationGroup available for form scenarios | | disabled | Boolean | false | Disables the button when true | | useSubmitBehavior | Boolean | false | Validates the group and submits the parent HTML form when true | | validationGroup | String | undefined | Name of the validation group to validate on click | | template | template | 'content' | Custom content template; receives { icon: String, text: String } | | rtlEnabled | Boolean | false | Enables RTL layout; also moves the icon to the right of the text | | hint | String | undefined | Tooltip text shown on hover | | activeStateEnabled | Boolean | true | Toggles active visual state on pointer press | | hoverStateEnabled | Boolean | true | Toggles hover visual state | | focusStateEnabled | Boolean | true | Toggles focus visual state |

Event: click — raised on click/tap; use the onClick option as the handler.

Getting Started

jQuery

// index.js
$(function() {
    $('#button').dxButton({
        text: 'Click me!',
        onClick() {
            DevExpress.ui.notify('Button was clicked');
        }
    });
});

Angular

// app.ts
import { Component } from '@angular/core';
import { DxButtonComponent } from 'devextreme-angular/ui/button';
import notify from 'devextreme/ui/notify';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [DxButtonComponent],
    templateUrl: './app.html'
})
export class AppComponent {
    showMessage = () => notify('Button was clicked');
}

Vue

    

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

function showMessage() {
    notify('Button was clicked');
}

React

// App.tsx
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import { Button } from 'devextreme-react/button';
import notify from 'devextreme/ui/notify';

function handleClick() {
    notify('Button was clicked');
}

function App() {
    return (
        
    );
}

export default App;

Styling: type and stylingMode

type and stylingMode are independent and can be freely combined.

{/* React */}

// jQuery
$('#button').dxButton({ text: 'Save', type: 'success', stylingMode: 'outlined' });

Custom type with CSS (all frameworks):

$('#button').dxButton({ type: 'warning' });

.dx-button.dx-button-warning { background-color: #ffc107; color: #000; }

Icons

Pass a built-in icon name, a URL, or a CSS class to icon. Combine with text or use alone for an icon-only button. Set rtlEnabled: true to move the icon to the right.

{/* React — icon + text */}

{/* React — icon only */}

{/* React — icon on the right */}

Custom icon position via CSS:

.dx-button .dx-icon { padding-left: 15px; }

Form Validation and Submission

Set useSubmitBehavior: true to validate editors in the associated validationGroup and submit the HTML form on click.

// jQuery
$('#submit-btn').dxButton({
    text: 'Submit',
    type: 'success',
    useSubmitBehavior: true
});

Use validationGroup when multiple validation scopes exist on the same page:

$('#btn').dxButton({ useSubmitBehavior: true, validationGroup: 'loginGroup' });

Customizing State Colors

hoverStateEnabled and activeStateEnabled toggle states on/off, but to change their colors use DevExtreme's state CSS classes: dx-state-hover and dx-state-active.

Scope by button type:

.dx-button.dx-button-default.dx-state-hover  { background-color: #0056b3; color: #fff; }
.dx-button.dx-button-default.dx-state-active { background-color: #003d80; color: #fff; }

Scope to a single button instance using elementAttr:

// React
const myButtonAttr = { class: 'my-button' };

function App() {
    return ;
}

.my-button.dx-state-hover  { background-color: #0056b3; }
.my-button.dx-state-active { background-color: #003d80; }

The same elementAttr + CSS approach works in all four frameworks.

Constraints & Rules

1. Framework first: Always ask which framework the developer is using before writing any code.
2. No fabricated API: Never guess option names or event names. Use the DxDocs MCP to verify if unsure.
3. Version consistency: All DevExtreme packages in a project must use the same version.
4. Framework conventions: Angular uses (onClick) binding + DxButtonComponent; React imports from devextreme-react/button; Vue imports from devextreme-vue/button; jQuery uses $(...).dxButton({}).
5. TypeScript by default: For Angular, React (TSX), and Vue, generate TypeScript unless the developer explicitly asks for JavaScript.
6. React — no inline objects or functions in JSX: Define event handlers with useCallback and render/template functions outside the component body. Never pass () => {} literals directly as JSX props.
7. Angular — standalone imports: Import DxButtonComponent from devextreme-angular/ui/button into the component's imports array. Do not use DxButtonModule or NgModule — Angular 20+ is fully standalone.
8. jQuery — always output both HTML and JS: Every jQuery snippet must include the container element (e.g. ``) alongside the JavaScript initializer.
9. React — use render prop for custom templates, not template: In React, the custom button template prop is named render. The template prop is for string-based template IDs used in jQuery and has no effect in React.
10. Angular — ClickEvent type import: Import the Angular-specific event type via import { DxButtonTypes } from 'devextreme-angular/ui/button' and use DxButtonTypes.ClickEvent. Do not import ClickEvent directly from 'devextreme/ui/button' in Angular components.

Using the DxDocs MCP

If the DxDocs MCP server is available:

• Search: mcp_dxdocs_devexpress_docs_search({ technology: "{Framework}", query: "..." })
• Fetch: mcp_dxdocs_devexpress_docs_get_content({ url: "..." })

Use it for: less common options (component, render, onContentReady, onOptionChanged), exact default values, and any API name you are not 100% certain about.

Official Resources

• Button demos
• dxButton API reference
• Getting Started with Button

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: DevExpress
• Source: DevExpress/agent-skills
• License: MIT
• Homepage: https://www.devexpress.com

Install and usage instructions live in the source repository linked above.