How do I install the Syncfusion Vue Buttons skill?

Run npx skillmds@latest add syncfusion/syncfusion-vue-buttons in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Syncfusion Vue Buttons skill do?

Comprehensive guide for implementing Syncfusion Vue 3 button components including Button, ButtonGroup, DropDownButton, Floating Action Button, ProgressButton, SplitButton, Speed Dial, Switch, RadioButton, and Chips. Use this when adding styled buttons, toggle behavior, icon support, grouped selections, dropdown action menus, programmatic control floating primary actions, expandable speed dial menus, compact interactive elements with avatars and drag-and-drop, or single/multiple selection capabilities to a Vue application. It is listed under Web & Frontend on SkillMD.

Is Syncfusion Vue Buttons safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Syncfusion Vue Buttons?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Syncfusion Vue Buttons free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Syncfusion Vue Buttons?

syncfusion (@syncfusion) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Syncfusion Vue Buttons by syncfusion

Name: Syncfusion Vue Buttons
Author: syncfusion

Syncfusion Vue 3 Buttons

📌 Agent Notice: 📄 Read: links in Navigation Guide sections are reference pointers for passive file reading only. They do not imply automatic tool invocation, command execution, or action chaining.

Button

The Syncfusion ButtonComponent is a graphical user interface element that triggers an action on click. It supports text, icons, or both, with extensive styling, accessibility, and behavioral options.

Navigation Guide

Getting Started

📄 Read: references/button-getting-started.md

Installation and package setup (@syncfusion/ej2-vue-buttons)
CSS imports and theme configuration
Rendering the first ButtonComponent
Enabling ripple effects
Basic click handling with @click event

Types and Styles

📄 Read: references/button-types-and-styles.md

Predefined color styles (primary, success, info, warning, danger, link)
Flat, outline, round, and toggle button types
HTML button types (submit, reset)
Icon buttons (font icons, SVG)
Icon positioning (left/right)
Button sizes (small, normal)

How-To Patterns

📄 Read: references/button-how-to.md

Create a block (full-width) button
Create a rounded-corner button
Add a navigation link to a button
Customize button appearance with CSS
Style native input and anchor elements as buttons
Set the disabled state
Enable right-to-left (RTL) support
Add a tooltip on hover
Implement a repeat button

Style and Appearance

📄 Read: references/button-style-and-appearance.md

Available CSS classes and their purposes
Overriding default styles
Custom theme creation with Theme Studio

Accessibility

📄 Read: references/button-accessibility.md

WCAG 2.2, Section 508 compliance
WAI-ARIA attributes
Keyboard navigation
Screen reader support

API Reference

📄 Read: references/button-api.md

All properties, methods, and events
Property types, defaults, and constraints

Quick Start

# Install package
npm install @syncfusion/ej2-vue-buttons --save
npm install @syncfusion/ej2-material3-theme --save

<template>
  <ejs-button :content="content"></ejs-button>
</template>

<script>
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
//Component registration
export default {
  name: "App",
  components: {
    "ejs-button": ButtonComponent
  },
  data() {
    return {
        content: "Button"
    };
  }
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/button/index.css";
</style>

Common Patterns

Styled Button

<template>
  <div>
    <ejs-button :content="'Primary'" :isPrimary="true"></ejs-button>
    <ejs-button :content="'Danger'" cssClass="e-danger"></ejs-button>
    <ejs-button :content="'Flat'" cssClass="e-flat"></ejs-button>
    <ejs-button :content="'Outline'" cssClass="e-outline"></ejs-button>
  </div>
</template>

<script>
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
export default {
  name: "App",
  components: {
    "ejs-button": ButtonComponent
  }
}
</script>

Icon Button

<template>
  <div>
    <ejs-button iconCss="e-icons e-save" :content="'Save'"></ejs-button>
    <ejs-button iconCss="e-icons e-delete" :content="'Delete'" iconPosition="Right"></ejs-button>
  </div>
</template>

<script>
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
export default {
  name: "App",
  components: {
    "ejs-button": ButtonComponent
  }
}
</script>

Toggle Button

<template>
  <div>
    <ejs-button :isToggle="true" cssClass="e-flat" :content="activeContent"></ejs-button>
  </div>
</template>

<script>
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
export default {
  name: "App",
  components: {
    "ejs-button": ButtonComponent
  },
  data: function() {
    return {
      activeContent: "Play"
    };
  },
  methods: {
    toggleActive: function() {
      this.activeContent = this.activeContent === 'Play' ? 'Pause' : 'Play';
    }
  }
}
</script>

Disabled Button

<template>
  <ejs-button :disabled="true" :content="'Disabled'"></ejs-button>
</template>

<script>
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
export default {
  name: "App",
  components: {
    "ejs-button": ButtonComponent
  }
}
</script>

Block (Full-Width) Button

<template>
  <ejs-button cssClass="e-block e-primary" :content="'Full Width'"></ejs-button>
</template>

<script>
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
export default {
  name: "App",
  components: {
    "ejs-button": ButtonComponent
  }
}
</script>

ButtonGroup

The ButtonGroup is a pure CSS component that groups a series of buttons together in a horizontal (default) or vertical layout. It supports normal button behavior as well as radio-type (single selection) and checkbox-type (multiple selection) behaviors. Buttons can be nested with DropDownButton and SplitButton components.

Navigation Guide

Getting Started

📄 Read: references/buttongroup-getting-started.md

Installation and package setup
Adding CSS references and theme imports
Basic ButtonGroup implementation
Running the application

Types and Styles

📄 Read: references/buttongroup-types-and-styles.md

Outline ButtonGroup (e-outline)
Predefined color styles (e-primary, e-success, e-info, e-warning, e-danger)
Mixing styles within a group

Selection and Nesting

📄 Read: references/buttongroup-selection-and-nesting.md

Single selection (radio type)
Multiple selection (checkbox type)
Setting initial selected state
Nesting DropDownButton inside ButtonGroup
Nesting SplitButton inside ButtonGroup

How-To Guide

📄 Read: references/buttongroup-how-to.md

Add icons to buttons (icon-css)
Rounded corners (e-round-corner)
Disable individual or all buttons
Enable ripple effect
Enable RTL support
Vertical orientation (e-vertical)
Form submit with radio/checkbox ButtonGroup
Initialize using CSS classes

Style and Appearance

📄 Read: references/buttongroup-style-and-appearance.md

Available CSS classes for customization
Overriding hover, focus, active states
Theme Studio integration

Accessibility

📄 Read: references/buttongroup-accessibility.md

WCAG 2.2, Section 508 compliance
Keyboard navigation shortcuts
Screen reader support

Quick Start

<template>
  <div class="e-btn-group">
    <ejs-button>HTML</ejs-button>
    <ejs-button>CSS</ejs-button>
    <ejs-button>Javascript</ejs-button>
  </div>
</template>

<script>
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
//Component registration
export default {
  name: "App",
  components: {
    "ejs-button": ButtonComponent
  },
  data() {
    return {
    };
  }
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/button-group/index.css";
</style>

Common Patterns

Radio (single-select) ButtonGroup

<template>
  <div class="e-btn-group">
    <input type="radio" id="radioleft" name="align" value="left" />
    <label class="e-btn" for="radioleft">Left</label>
    <input type="radio" id="radiomiddle" name="align" value="middle" />
    <label class="e-btn" for="radiomiddle">Center</label>
    <input type="radio" id="radioright" name="align" value="right" />
    <label class="e-btn" for="radioright">Right</label>
  </div>
</template>

<script>
export default {
  name: "App"
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/button-group/index.css";
</style>

Checkbox (multi-select) ButtonGroup

<template>
  <div class="e-btn-group">
    <input type="checkbox" id="checkbold" name="font" value="bold" />
    <label class="e-btn" for="checkbold">Bold</label>
    <input type="checkbox" id="checkitalic" name="font" value="italic" />
    <label class="e-btn" for="checkitalic">Italic</label>
    <input type="checkbox" id="checkline" name="font" value="underline" />
    <label class="e-btn" for="checkline">Underline</label>
  </div>
</template>

<script>
export default {
  name: "App"
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/button-group/index.css";
</style>

Vertical ButtonGroup

<template>
  <div class="e-btn-group e-vertical">
    <ejs-button>HTML</ejs-button>
    <ejs-button>CSS</ejs-button>
    <ejs-button>Javascript</ejs-button>
  </div>
</template>

<script>
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
export default {
  name: "App",
  components: {
    "ejs-button": ButtonComponent
  }
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/button-group/index.css";
</style>

Key Props

Prop / Class	Component	Description
`css-class`	`ButtonComponent`	Apply style classes (e-outline, e-primary, e-success, e-info, e-warning, e-danger)
`icon-css`	`ButtonComponent`	CSS class(es) for button icon
`:disabled`	`ButtonComponent`	Disables the button
`is-primary`	`ButtonComponent`	Marks button as primary
`e-btn-group`	container div	Required wrapper class for ButtonGroup
`e-outline`	container div + buttons	Outline style for the group
`e-round-corner`	container div	Rounded corners for the group
`e-vertical`	container div	Vertical layout
`e-rtl`	container div	Right-to-left layout

DropDownButton

The Syncfusion DropDownButtonComponent renders a button that toggles a contextual popup menu with a list of action items. It supports icons, separators, templates, animations, accessibility, and extensive customization.

Navigation Guide

Getting Started

📄 Read: references/dropdownbutton-getting-started.md

Installation and package setup
CSS imports and theme configuration
Rendering the first DropDownButtonComponent
Binding data source with :items
Minimal working example

Popup Items and Navigation

📄 Read: references/dropdownbutton-popup-items.md

Adding icons to popup items with icon-css
Navigation URLs via url on items
Separators to group popup items
Item templates with before-item-render
Popup (target) templates
Underline characters in item text

Icons and Layout

📄 Read: references/dropdownbutton-icons-and-layout.md

Button icons with icon-css and icon-position
Icon-only buttons with e-caret-hide
Sprite image icons
Vertical button layout with e-vertical
Customizing icon size and button width

Appearance and Styling

📄 Read: references/dropdownbutton-appearance-and-styling.md

CSS class overrides (color styles, sizes, states)
Rounded corners with e-round-corner
Hide dropdown arrow with e-caret-hide
Popup width with popup-width
Theme Studio customization
Animation settings for popup open/close

Events and Interactivity

📄 Read: references/dropdownbutton-events-and-interactivity.md

Handling @select event on item click
@before-open / @before-close for dynamic caret icon
@open event for custom popup positioning
Disabling the button with :disabled
RTL support with enable-rtl
Opening a dialog on item select
Dynamic add-items / remove-items methods
toggle() method for programmatic open/close

Item Template

📄 Read: references/dropdownbutton-item-template.md

item-template property for custom item rendering
Rendering links, icons, and rich content inside items

ListView Integration

📄 Read: references/dropdownbutton-listview-integration.md

Using target property with a ListView element
Grouped popup items with category headers

Accessibility

📄 Read: references/dropdownbutton-accessibility.md

WCAG 2.2, Section 508, ADA compliance
WAI-ARIA attributes (role, aria-haspopup, aria-expanded)
Keyboard navigation shortcuts
Screen reader support

API Reference

📄 Read: references/dropdownbutton-api.md

All properties with types and defaults
All events with argument interfaces
All methods with return types
Type definitions and interfaces

Quick Start

<template>
  <ejs-dropdownbutton :items='items'>Clipboard</ejs-dropdownbutton>
</template>

<script>
import { DropDownButtonComponent } from "@syncfusion/ej2-vue-splitbuttons";
export default {
  name: "App",
  components: { "ejs-dropdownbutton": DropDownButtonComponent },
  data () {
    return {
      items:[ { text: 'Cut' }, { text: 'Copy' }, { text: 'Paste' } ]
    };
  }
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/drop-down-button/index.css";
</style>

Floating Action Button

The Syncfusion Vue FabComponent is a circular button that floats above the UI and represents the primary action in an application. It supports flexible positioning, icon + text content, predefined styles, full accessibility compliance, and CSS customization.

Navigation Guide

Getting Started

📄 Read: references/floating-action-button-getting-started.md

Installing @syncfusion/ej2-vue-buttons
CSS theme imports for Tailwind3
Minimal FabComponent setup
Using target to position relative to a container
Handling the click event

Icons and Content

📄 Read: references/floating-action-button-icons.md

icon-css prop for icon-only FAB
content prop for text label
icon-position for icon-left vs icon-right layout
Combined icon + text examples

Positions

📄 Read: references/floating-action-button-positions.md

position prop with all nine predefined values (TopLeft → BottomRight)
target prop to scope FAB to a container
Custom CSS position using css-class

Styles and Appearance

📄 Read: references/floating-action-button-styles.md

Predefined css-class values: e-primary, e-outline, e-info, e-success, e-warning, e-danger
CSS class override reference table
Show text on hover with CSS transition
Outline color customization

Events

📄 Read: references/floating-action-button-events.md

@click event for click handling
@created event for post-render initialization

Accessibility

📄 Read: references/floating-action-button-accessibility.md

WCAG 2.2 / Section 508 compliance
WAI-ARIA attributes (aria-label, aria-disabled, role="button")
Keyboard navigation (Enter, Space, Tab, Escape)
RTL support via enable-rtl
Screen reader support

API Reference

📄 Read: references/floating-action-button-api.md

All properties, methods, and events with types and defaults

ProgressButton

The ProgressButtonComponent provides a button that visualizes the progression of a background operation — complete with an animated spinner, background progress bar fill, and content/style hooks at every stage.

Navigation Guide

Getting Started

📄 Read: references/progressbutton-getting-started.md

Installation and CSS imports
Basic ProgressButtonComponent rendering
Enabling progress mode

Spinner and Progress

📄 Read: references/progressbutton-spinner-and-progress.md

Spinner position/size/template
Progress bar configuration
Animations and step control
Start/stop methods

Style and Appearance

📄 Read: references/progressbutton-style-and-appearance.md

CSS classes and theming
Theme Studio integration

Accessibility

📄 Read: references/progressbutton-accessibility.md

ARIA attributes and keyboard navigation
Screen-reader compliance

How-To Guides

📄 Read: references/progressbutton-how-to-enable-progress-in-button.md 📄 Read: references/progressbutton-how-to-hide-spinner.md 📄 Read: references/progressbutton-how-to-customize-progress-using-cssclass.md 📄 Read: references/progressbutton-how-to-change-text-content-and-styles-of-the-progressbutton-during-progress.md 📄 Read: references/progressbutton-how-to-trace-events-of-progress-button.md

API Reference

📄 Read: references/progressbutton-api.md

All properties, methods, and events

RadioButton

A graphical UI element that lets users select exactly one option from a group. Supports checked/unchecked states, label positioning, small size, form integration, RTL, disabled state, and full CSS customization.

Navigation Guide

Getting Started

📄 Read: references/radiobutton-getting-started.md

Package installation and CSS import
Basic RadioButtonComponent rendering
Grouping radio buttons with name prop
Enabling ripple effect

Label and Size

📄 Read: references/radiobutton-label-and-size.md

Adding captions with the label property
Positioning labels before/after with label-position
Applying small size with css-class="e-small"

Features and State

📄 Read: references/radiobutton-features-and-state.md

Setting checked/unchecked state
Disabling a RadioButton
Grouping and form submission with name and value
RTL layout
Handling state change via change event

Style and Appearance

📄 Read: references/radiobutton-style-and-appearance.md

Overriding default CSS classes
Creating semantic color variants
Using css-class for custom styles
Theme Studio integration

Accessibility

📄 Read: references/radiobutton-accessibility.md

WCAG 2.2 and Section 508 compliance
Keyboard navigation shortcuts
Screen reader support

API Reference

📄 Read: references/radiobutton-api.md

All properties, methods, and events

Speed Dial

The SpeedDialComponent is a floating action button (FAB) that reveals a set of contextual action items when clicked or hovered. It supports Linear and Radial display modes, flexible positioning, templates, animations, modal overlay, and full accessibility.

Navigation Guide

Getting Started

📄 Read: references/speeddial-getting-started.md

Installation and package setup
CSS imports and theme configuration
Rendering the first SpeedDialComponent
Basic items configuration
Target element setup

Items Configuration

📄 Read: references/speeddial-items.md

SpeedDialItemModel fields (text, icon-css, id, title, disabled)
Icon only, text only, icon with text combinations
Disabling individual items
Animation effects (Fade, Zoom, etc.)

Display Modes

📄 Read: references/speeddial-display-modes.md

Linear mode (default) and direction values (Up, Down, Left, Right, Auto)
Radial mode overview and usage

Radial Menu

📄 Read: references/speeddial-radial-menu.md

Setting mode to Radial
radialSettings configuration
startAngle and endAngle
offset to control item distance

Positions and Visibility

📄 Read: references/speeddial-positions.md

Position values (TopLeft, TopCenter, TopRight, etc.)
Target element relative positioning
opensOnHover for hover-based open behavior
Programmatic show() and hide() methods

Styles and Appearance

📄 Read: references/speeddial-styles.md

openIconCss and closeIconCss for button icons
content property for text button
Predefined css-class values
Custom CSS overrides

Events

📄 Read: references/speeddial-events.md

clicked, @created, @before-open, @open, @before-close, @close events
Event argument types
Cancel pattern for beforeOpen and beforeClose

Templates

📄 Read: references/speeddial-template.md

item-template for custom item rendering
popup-template for full popup customization

Modal

📄 Read: references/speeddial-modal.md

Enabling modal overlay
Interaction blocking behavior
Close on backdrop click

Accessibility

📄 Read: references/speeddial-accessibility.md

WCAG 2.2, Section 508 compliance
Keyboard navigation shortcuts
Screen reader support

API Reference

📄 Read: references/speeddial-api.md

All properties, methods, and events

SplitButton

A button that displays a primary action and a dropdown menu of secondary actions.

Navigation Guide

Getting Started

📄 Read: references/splitbutton-getting-started.md

Installation and package setup
Basic SplitButton implementation
CSS imports and themes
First working example

Types and Styles

📄 Read: references/splitbutton-types-and-styles.md

Button styles (primary, success, info, warning, danger, link)
Button types (flat, outline, round)
Icon positioning (left, right, top, bottom)
Size variations

Features

📄 Read: references/splitbutton-features.md

Dropdown menu items
Icon and text combinations
Disabled state
Event handling
Dynamic item manipulation

API Reference

📄 Read: references/splitbutton-api-reference.md

Complete properties documentation
Methods and their usage
Event handlers and callbacks

Customization

📄 Read: references/splitbutton-customization.md

Custom CSS classes
Theming and color schemes
Custom icons and fonts
Responsive design

Accessibility

📄 Read: references/splitbutton-accessibility.md

WCAG 2.1 compliance
Keyboard navigation patterns
ARIA attributes

Switch

A graphical toggle control that switches between checked (on) and unchecked (off) states. Supports text labels, size variants, disabled state, form submission, RTL, programmatic control, and full CSS customization.

Navigation Guide

Getting Started

📄 Read: references/switch-getting-started.md

Package installation and npm setup
CSS theme imports
Basic SwitchComponent rendering
Checked state initialization

Features

📄 Read: references/switch-features.md

on-label / off-label text labels
disabled property
name and value for form submission
css-class for custom styling
enable-rtl for right-to-left support

Events and Methods

📄 Read: references/switch-events-and-methods.md

@change event and ChangeEventArgs
@before-change event to cancel state transitions
@created lifecycle event
toggle() method for programmatic state control

How-To

📄 Read: references/switch-how-to.md

Change switch size (small vs default)
Prevent state change
Set text labels
Enable RTL layout
Programmatic toggle

Style and Appearance

📄 Read: references/switch-style-and-appearance.md

CSS class reference table
Customizing bar and handle shape
Small size variant
Theme Studio

API Reference

📄 Read: references/switch-api.md

All properties with types and defaults
All methods and events

Chips

The ChipListComponent renders compact, interactive elements representing inputs, attributes, or actions. Supports single/multiple selection, deletion, drag-and-drop, avatars, icons, templates, and rich styling.

Navigation Guide

Getting Started

📄 Read: references/chips-getting-started.md

Installation and package setup
CSS/theme imports
Rendering a basic chip or chip list
Running the application

Types and Selection

📄 Read: references/chips-types-and-selection.md

Four chip types: Input, Choice, Filter, Action
Single selection vs. multiple selection
Deletable chips
Pre-selecting chips

Customization

📄 Read: references/chips-customization.md

Predefined styles
Leading icon and avatar image
Custom chip template
htmlAttributes for custom HTML attributes

Drag and Drop

📄 Read: references/chips-drag-and-drop.md

Enabling drag and drop
Restricting drag area
Drag events
Cross-container drag and drop

Style

📄 Read: references/chips-style.md

CSS overrides for chip styling
Outline chip styling
Selected chip customization
Size customization

Accessibility

📄 Read: references/chips-accessibility.md

WCAG 2.2, Section 508, ADA compliance
Keyboard navigation
RTL support

API Reference

📄 Read: references/chips-api.md

All properties, methods, and events

Common Vue 2 Patterns Across All Components

Reactive State (data property)

<script>
export default {
  name: "App",
  data: function() {
    return {
      isActive: false,
      config: {
        disabled: false,
        cssClass: 'e-primary'
      }
    };
  }
};
</script>

Event Handling

<template>
  <ejs-button @click="handleClick" @created="onCreated"></ejs-button>
</template>

<script>
export default {
  name: "App",
  methods: {
    handleClick: function(args) {
      console.log('Button clicked', args);
    },
    onCreated: function() {
      console.log('Component created');
    }
  }
};
</script>

Template Refs for Method Calls

<template>
  <ejs-button ref="btnRef"></ejs-button>
</template>

<script>
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';

export default {
  name: "App",
  components: {
    'ejs-button': ButtonComponent
  },
  methods: {
    callMethod: function() {
      if (this.$refs.btnRef) {
        this.$refs.btnRef.click();
      }
    }
  }
};
</script>

Computed Properties

<template>
  <ejs-button :disabled="isLoading"></ejs-button>
</template>

<script>
export default {
  name: "App",
  data: function() {
    return {
      status: 'pending'
    };
  },
  computed: {
    isLoading: function() {
      return this.status === 'pending';
    }
  }
};
</script>

Component Props Binding

<template>
  <ejs-dropdownbutton :items="menuItems" :disabled="isDisabled"></ejs-dropdownbutton>
</template>

<script>
import { DropDownButtonComponent } from '@syncfusion/ej2-vue-buttons';

export default {
  name: "App",
  components: {
    'ejs-dropdownbutton': DropDownButtonComponent
  },
  data: function() {
    return {
      menuItems: [
        { text: 'Cut' },
        { text: 'Copy' }
      ],
      isDisabled: false
    };
  }
};

const isDisabled = ref(false);
</script>

Next Steps

Start with Button → Read references/button-getting-started.md
Explore Button Group → Read references/buttongroup-getting-started.md
Advanced Components → Choose from DropdownButton, FloatingActionButton, ProgressButton, RadioButton, SpeedDial, SplitButton, Switch, or Chips
API Reference → Consult component-specific API documentation for detailed properties and methods
Accessibility → Review accessibility guides for WCAG compliance and screen reader support

Key Takeaways

Vue 3 Composition API: Use ref() for state, computed() for derived values, and template refs for method calls
Reactive Props: Prefix prop names with : for v-bind binding (:disabled, :items, etc.)
Event Binding: Use @event-name syntax (e.g., @click, @select, @before-open)
Kebab-Case Props: Vue uses kebab-case for HTML attributes (icon-css, css-class, etc.)
CSS Imports: Import Syncfusion base and component CSS in your main app
Component Refs: Use ref="varName" to access component methods in <script setup>
Package: Install @syncfusion/ej2-vue-buttons and related splitbuttons/popups packages

Syncfusion Vue Buttons

File contents

Syncfusion Vue 3 Buttons

Button

Navigation Guide

Getting Started

Types and Styles

How-To Patterns

Style and Appearance

Accessibility

API Reference

Quick Start

Common Patterns

Styled Button

Icon Button

Toggle Button

Disabled Button

Block (Full-Width) Button

ButtonGroup

Navigation Guide

Getting Started

Types and Styles

Selection and Nesting

How-To Guide

Style and Appearance

Accessibility

Quick Start

Common Patterns

Radio (single-select) ButtonGroup

Checkbox (multi-select) ButtonGroup

Vertical ButtonGroup

Key Props

DropDownButton

Navigation Guide

Getting Started

Popup Items and Navigation

Icons and Layout

Appearance and Styling

Events and Interactivity

Item Template

ListView Integration

Accessibility

API Reference

Quick Start

Floating Action Button

Navigation Guide

Getting Started

Icons and Content

Positions

Styles and Appearance

Events

Accessibility

API Reference

ProgressButton

Navigation Guide

Getting Started

Spinner and Progress

Style and Appearance

Accessibility

How-To Guides

API Reference

RadioButton

Navigation Guide

Getting Started

Label and Size

Features and State

Style and Appearance

Accessibility

API Reference

Speed Dial

Navigation Guide

Getting Started

Items Configuration

Display Modes

Radial Menu

Positions and Visibility

Styles and Appearance

Events

Templates

Modal