devextreme-button

DevExtreme Button Skill

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

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

If the host agent has a structured question-asking tool available, use it to ask these questions one at a time with clear options — for example, Claude Code's AskUserQuestion tool or GitHub Copilot's askQuestions tool. If no such tool is available, ask the questions directly in the chat response before generating code.

⚠️ Always use the DevExtreme Button (dxButton / DxButton). Never use a plain HTML <button>, 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, jQuery, or ASP.NET Core Controls?
2. What do you need the button to do? (e.g., trigger an action, submit a form, navigate)

Skip the framework question if the request or project already identifies the framework. If the reply leaves it unresolved, re-ask once with the list: Angular, React, Vue, jQuery, or ASP.NET Core Controls. If it remains unresolved, default to React + Vite + TypeScript and state that assumption.

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.

Documentation Reference Files

File	When you need to
references/templates.md	Replace Button content with a framework-specific template, render function, or component