Syncfusion React Buttons

Syncfusion React 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
• CSS imports and theme configuration
• Rendering the first ButtonComponent
• Enabling ripple effects
• Basic click handling

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
• Basic 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

⚠️ Run the following command manually in your terminal. Do not execute automatically.

# Run in your terminal
npm install @syncfusion/ej2-react-buttons --save

// src/App.css
// @import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
// @import "../node_modules/@syncfusion/ej2-react-buttons/styles/tailwind3.css";

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import './App.css';

enableRipple(true);

function App() {
  return (
    <div>
      <ButtonComponent>Default</ButtonComponent>
      <ButtonComponent cssClass='e-primary'>Primary</ButtonComponent>
      <ButtonComponent cssClass='e-success'>Success</ButtonComponent>
    </div>
  );
}
export default App;

---

Common Patterns

Styled Button

<ButtonComponent cssClass='e-primary'>Save</ButtonComponent>
<ButtonComponent cssClass='e-danger'>Delete</ButtonComponent>
<ButtonComponent cssClass='e-flat'>Flat</ButtonComponent>
<ButtonComponent cssClass='e-outline'>Outline</ButtonComponent>

Icon Button

<ButtonComponent iconCss='e-icons e-save'>Save</ButtonComponent>
<ButtonComponent iconCss='e-icons e-delete' iconPosition='Right'>Delete</ButtonComponent>

Toggle Button

const [active, setActive] = React.useState(false);
<ButtonComponent isToggle={true} cssClass='e-flat'
  onClick={() => setActive(!active)}>
  {active ? 'Pause' : 'Play'}
</ButtonComponent>

Disabled Button

<ButtonComponent disabled={true}>Disabled</ButtonComponent>

Block (Full-Width) Button

<ButtonComponent cssClass='e-block e-primary'>Full Width</ButtonComponent>

---

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 (iconCss)
• 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 createButtonGroup utility function

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

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import './App.css';

function App() {
  return (
    <div className='e-btn-group'>
      <ButtonComponent>HTML</ButtonComponent>
      <ButtonComponent>CSS</ButtonComponent>
      <ButtonComponent>Javascript</ButtonComponent>
    </div>
  );
}
export default App;

Required CSS imports in src/App.css:

@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";

---

Common Patterns

Radio (single-select) ButtonGroup

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

Checkbox (multi-select) ButtonGroup

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

Vertical ButtonGroup

<div className='e-btn-group e-vertical'>
  <ButtonComponent>HTML</ButtonComponent>
  <ButtonComponent>CSS</ButtonComponent>
  <ButtonComponent>Javascript</ButtonComponent>
</div>

---

Key Props

---

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 iconCss
• Navigation URLs via url on items
• Separators to group popup items
• Item templates with beforeItemRender
• Popup (target) templates
• Underline characters in item text

Icons and Layout

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

• Button icons with iconCss and iconPosition
• 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 popupWidth
• 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
• beforeOpen / beforeClose for dynamic caret icon
• open event for custom popup positioning
• Disabling the button with disabled
• RTL support with enableRtl
• Opening a dialog on item select
• Dynamic addItems / removeItems methods
• toggle method for programmatic open/close

Item Template

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

• itemTemplate 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: items, cssClass, iconCss, iconPosition, disabled, enableRtl, animationSettings, popupWidth, target, itemTemplate, content, closeActionEvents, createPopupOnClick, enableHtmlSanitizer, enablePersistence, locale
• All events: beforeClose, beforeOpen, beforeItemRender, close, open, select, created
• All methods: addItems, removeItems, toggle, focusIn, destroy, getPersistData
• Type definitions: ItemModel, MenuEventArgs, OpenCloseMenuEventArgs, BeforeOpenCloseMenuEventArgs

---

Quick Start

import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
import { enableRipple } from '@syncfusion/ej2-base';
import * as React from 'react';
import './App.css';

enableRipple(true);

function App() {
  const items: ItemModel[] = [
    { text: 'Cut' },
    { text: 'Copy' },
    { text: 'Paste' },
  ];

  return (
    <DropDownButtonComponent items={items}>
      Clipboard
    </DropDownButtonComponent>
  );
}

export default App;

---

Common Patterns

Button with icon and popup icons

const items: ItemModel[] = [
  { text: 'Edit',   iconCss: 'ddb-icons e-edit' },
  { text: 'Delete', iconCss: 'ddb-icons e-delete' },
];
<DropDownButtonComponent items={items} iconCss="ddb-icons e-message">
  Message
</DropDownButtonComponent>

Grouped items with separator

const items: ItemModel[] = [
  { text: 'Cut',   iconCss: 'e-db-icons e-cut' },
  { text: 'Copy',  iconCss: 'e-icons e-copy' },
  { separator: true },
  { text: 'Font',  iconCss: 'e-db-icons e-font' },
];

Handling item selection

import { MenuEventArgs } from '@syncfusion/ej2-react-splitbuttons';

function onSelect(args: MenuEventArgs) {
  console.log('Selected:', args.item.text);
}
<DropDownButtonComponent items={items} select={onSelect}>
  Actions
</DropDownButtonComponent>

---

Floating Action Button

The Syncfusion React 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.

Package: @syncfusion/ej2-react-buttons

Navigation Guide

Getting Started

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

• Installing @syncfusion/ej2-react-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

• iconCss prop for icon-only FAB
• content prop for text label
• iconPosition 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 cssClass

Styles and Appearance

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

• Predefined cssClass 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

• onClick 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 enableRtl
• Screen reader support

API Reference

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

• All properties: content, cssClass, disabled, enableHtmlSanitizer, enablePersistence, enableRtl, iconCss, iconPosition, isPrimary, isToggle, position, target, visible
• Methods: click(), destroy(), focusIn(), getPersistData(), refreshPosition()
• Events: created, onClick

---

Quick Start

⚠️ Run the following command manually in your terminal. Do not execute automatically.

# Run in your terminal
npm install @syncfusion/ej2-react-buttons --save

/* src/App.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";

import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import './App.css';

function App() {
  return (
    <div>
      <div id="targetElement" style={{ position: 'relative', minHeight: '350px', border: '1px solid' }}></div>
      <FabComponent id="fab" content="Add" target="#targetElement" />
    </div>
  );
}
export default App;

---

Common Patterns

Icon-Only FAB (most common)

import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {
  return (
    <div>
      <div id="target" style={{ position: 'relative', minHeight: '350px' }}></div>
      <FabComponent id="fab" iconCss="e-icons e-edit" target="#target" />
    </div>
  );
}
export default App;

FAB with Click Handler

import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {
  function handleClick(): void {
    alert('FAB clicked!');
  }

  return (
    <div>
      <div id="target" style={{ position: 'relative', minHeight: '350px' }}></div>
      <FabComponent id="fab" iconCss="e-icons e-edit" content="Edit" onClick={handleClick} target="#target" />
    </div>
  );
}
export default App;

FAB with Custom Style

import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {
  return (
    <div>
      <div id="target" style={{ position: 'relative', minHeight: '350px' }}></div>
      <FabComponent id="fab" iconCss="e-icons e-delete" cssClass="e-danger" target="#target" />
    </div>
  );
}
export default App;

---

Key Props at a Glance

---

Speed Dial

The Syncfusion 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, iconCss, id, title, disabled)
• Icon only, text only, icon with text combinations
• Disabling individual items
• Animation effects (Fade, Zoom, etc.)
• Item templates overview

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: direction (Clockwise, AntiClockwise, Auto)
• startAngle and endAngle configuration
• offset to control item distance from button

Positions and Visibility Control

📄 Read: references/speeddial-positions.md

• Position values (TopLeft, TopCenter, TopRight, MiddleLeft, MiddleCenter, MiddleRight, BottomLeft, BottomCenter, BottomRight)
• Target element relative positioning
• opensOnHover for hover-based open behavior
• Programmatic show() and hide() methods
• refreshPosition() after layout changes

Styles and Appearance

📄 Read: references/speeddial-styles.md

• openIconCss and closeIconCss for button icons
• content property for text button
• Predefined cssClass values (e-primary, e-outline, e-info, e-success, e-warning, e-danger)
• disabled and visible properties
• Tooltip via title attribute
• Custom CSS overrides

Templates

📄 Read: references/speeddial-template.md

• itemTemplate for custom item rendering
• popupTemplate for full popup customization
• JSX function template pattern

Events

📄 Read: references/speeddial-events.md

• clicked, created, beforeOpen, onOpen, beforeClose, onClose, beforeItemRender
• Event argument types: SpeedDialItemEventArgs, SpeedDialBeforeOpenCloseEventArgs, SpeedDialOpenCloseEventArgs
• Cancel pattern for beforeOpen and beforeClose

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
• WAI-ARIA attributes (role, aria-expanded, aria-label, etc.)
• Keyboard navigation shortcuts
• Screen reader support
• RTL support via enableRtl

API Reference

📄 Read: references/speeddial-api.md

• All properties, methods, and events with types and defaults

---

Quick Start

⚠️ Run the following command manually in your terminal. Do not execute automatically.

# Run in your terminal
npm install @syncfusion/ej2-react-buttons --save

/* src/App.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";

import { SpeedDialComponent, SpeedDialItemModel } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import './App.css';

function App() {
  const items: SpeedDialItemModel[] = [
    { text: 'Cut', iconCss: 'e-icons e-cut' },
    { text: 'Copy', iconCss: 'e-icons e-copy' },
    { text: 'Paste', iconCss: 'e-icons e-paste' }
  ];

  return (
    <div id="targetElement" style={{ position: 'relative', minHeight: '350px', border: '1px solid' }}>
      <SpeedDialComponent
        id='speeddial'
        content='Edit'
        openIconCss='e-icons e-edit'
        closeIconCss='e-icons e-close'
        items={items}
        target="#targetElement"
      />
    </div>
  );
}
export default App;

---

Common Patterns

Icon-only items with tooltip

const items: SpeedDialItemModel[] = [
  { iconCss: 'e-icons e-cut', title: 'Cut' },
  { iconCss: 'e-icons e-copy', title: 'Copy' },
  { iconCss: 'e-icons e-paste', title: 'Paste' }
];
<SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' items={items} target="#targetElement" />

Radial mode

import { RadialSettingsModel } from '@syncfusion/ej2-react-buttons';
const radialSettings: RadialSettingsModel = { direction: 'AntiClockwise', offset: '80px' };
<SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' items={items}
  mode='Radial' radialSettings={radialSettings} target="#targetElement" />

Handle item click

import { SpeedDialItemEventArgs } from '@syncfusion/ej2-react-buttons';
function itemClick(args: SpeedDialItemEventArgs) {
  console.log('Clicked:', args.item.text);
}
<SpeedDialComponent id='speeddial' items={items} content='Edit' clicked={itemClick} target="#targetElement" />

Modal with overlay

<SpeedDialComponent id='speeddial' items={items} openIconCss='e-icons e-edit'
  modal={true} target="#targetElement" />

Programmatic open/close

let speeddialRef: SpeedDialComponent;
<SpeedDialComponent id='speeddial' items={items} openIconCss='e-icons e-edit'
  target="#targetElement" ref={scope => { speeddialRef = scope; }} />
// Open:  speeddialRef.show();
// Close: speeddialRef.hide();

Implementing the Syncfusion React ProgressButton

The ProgressButtonComponent from @syncfusion/ej2-react-splitbuttons provides a button that visualises the progression of a background operation — complete with an animated spinner, a background progress bar fill, and content/style hooks at every stage of the operation.

Navigation Guide

---

Quick Start

npm install @syncfusion/ej2-react-splitbuttons --save

// src/App.tsx
import { ProgressButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import './App.css';

function App() {
  return <ProgressButtonComponent content="Submit" />;
}
export default App;

/* src/App.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";

---

Common Patterns

Progress bar + hidden spinner

<ProgressButtonComponent
  content="Upload"
  enableProgress={true}
  cssClass="e-hide-spinner"
  duration={4000}
/>

Custom spinner (right, small, templated)

import { SpinSettingsModel } from '@syncfusion/ej2-react-splitbuttons';

const spinSettings: SpinSettingsModel = {
  position: 'Right',
  width: 20,
  template: '<div class="my-spinner"></div>'
};

<ProgressButtonComponent content="Submit" spinSettings={spinSettings} />

Slide animation with centered spinner

import { AnimationSettingsModel, SpinSettingsModel } from '@syncfusion/ej2-react-splitbuttons';

const spinSettings: SpinSettingsModel = { position: 'Center' };
const animationSettings: AnimationSettingsModel = {
  effect: 'SlideLeft',
  duration: 500,
  easing: 'linear'
};

<ProgressButtonComponent
  content="Slide Left"
  enableProgress={true}
  spinSettings={spinSettings}
  animationSettings={animationSettings}
/>

Start / stop programmatic control

let progressBtn: ProgressButtonComponent;

<ProgressButtonComponent
  content="Download"
  enableProgress={true}
  duration={4000}
  cssClass="e-hide-spinner"
  ref={(scope) => { progressBtn = scope as ProgressButtonComponent; }}
/>

// Pause:  progressBtn.stop();
// Resume: progressBtn.start();
// Finish: progressBtn.progressComplete();

Lifecycle events

<ProgressButtonComponent
  content="Progress"
  enableProgress={true}
  begin={(args) => console.log('started', args.percent)}
  progress={(args) => console.log('progress', args.percent)}
  end={(args) => console.log('done', args.percent)}
  fail={(args) => console.log('failed', args)}
/>

---

Reference Files

Switch

The Syncfusion SwitchComponent is a graphical toggle control that switches between checked (on) and unchecked (off) states. It is part of the @syncfusion/ej2-react-buttons package and supports text labels, size variants, disabled state, form submission, RTL, programmatic control, and full CSS customization.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Package installation and npm setup
• CSS theme imports
• Basic SwitchComponent rendering
• Checked state initialization
• Running the application

Features and Configuration

📄 Read: references/features.md

• onLabel / offLabel text labels
• disabled property
• name and value for form submission
• cssClass for custom styling
• enableRtl for right-to-left support
• enablePersistence to persist state across reloads
• htmlAttributes for additional HTML attributes
• locale for localization

Events and Methods

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

• change event and ChangeEventArgs
• beforeChange event to cancel state transitions
• created lifecycle event
• toggle() method for programmatic state control
• click(), focusIn(), and destroy() methods
• Using ref to call methods imperatively

How-To Recipes

📄 Read: references/how-to.md

• Change switch size (small vs default)
• Prevent state change using beforeChange
• Set text labels (ON/OFF)
• Enable ripple on label click
• Enable RTL layout
• Set disabled state
• Submit name and value in a form
• Programmatic toggle via toggle() method

Style and Appearance

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

• CSS class reference table
• Customizing bar and handle shape
• Customizing switch colors
• Small size variant
• Using Theme Studio

API Reference

📄 Read: references/api.md

• All properties with types and defaults
• All methods with return types
• All events with argument interfaces
• ChangeEventArgs and BeforeChangeEventArgs

Quick Start

import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
import '@syncfusion/ej2-base/styles/tailwind3.css';
import '@syncfusion/ej2-buttons/styles/tailwind3.css';

enableRipple(true);

function App() {
  return <SwitchComponent checked={true} />;
}
export default App;

Install the package first:

npm install @syncfusion/ej2-react-buttons --save

Common Patterns

Switch with ON/OFF text labels

<SwitchComponent onLabel="ON" offLabel="OFF" checked={true} />

Note: Text labels are not supported in Material themes.

Handle state changes

import { ChangeEventArgs, SwitchComponent } from '@syncfusion/ej2-react-buttons';

function App() {
  function onChange(args: ChangeEventArgs) {
    console.log('Switch is now:', args.checked);
  }
  return <SwitchComponent change={onChange} />;
}

Disabled switch

<SwitchComponent disabled={true} />

Small size switch

<SwitchComponent cssClass="e-small" />

Programmatic toggle

import { useRef } from 'react';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';

function App() {
  const switchRef = useRef<SwitchComponent>(null);

  function handleToggle() {
    switchRef.current?.toggle();
  }

  return (
    <>
      <SwitchComponent ref={switchRef} checked={false} />
      <button onClick={handleToggle}>Toggle</button>
    </>
  );
}

Form submission with name and value

<SwitchComponent name="wifi" value="enabled" checked={true} />

Key Props at a Glance

SplitButton

A comprehensive skill for implementing the SplitButton component in React applications. The SplitButton combines a primary action button with a dropdown menu for secondary actions.

Components Covered

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

Common Use Cases:

• Save variants: Save, Save As, Save All
• Send variants: Send, Schedule Send, Send All
• Download variants: Download, Download All, Export
• Share options: Share, Share Link, Share Email
• Print options: Print, Print Preview, Print Settings

Documentation

Getting Started

📄 Read: references/getting-started.md

• Installation and package setup
• Basic SplitButton implementation
• CSS imports and themes
• First working example
• Module setup (standalone and module-based)

Types and Styles

📄 Read: references/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 (small, medium, large)
• Styled anchor elements
• RTL support

SplitButton Features

📄 Read: references/splitbutton-features.md

• Dropdown menu items
• Icon and text combinations
• Disabled state
• Event handling (click, select, before open)
• Dynamic item manipulation
• Keyboard navigation
• Tooltips and titles

API Reference

📄 Read: references/api-reference.md

• Complete properties documentation
• Methods and their usage
• Event handlers and callbacks
• Model interfaces
• Type definitions
• Quick reference tables

Customization

📄 Read: references/customization.md

• Custom CSS classes
• Theming and color schemes
• Custom icons and fonts
• Custom templates for items
• Responsive design
• Animation and transitions
• Item separators and grouping

Accessibility

📄 Read: references/accessibility.md

• WCAG 2.1 compliance
• Keyboard navigation patterns
• ARIA attributes
• Screen reader support
• Focus management
• Accessible labels and descriptions

Quick Start

Basic SplitButton

import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import '@syncfusion/ej2-react-splitbuttons/styles/material.css';

function App() {
  const items = [
    { text: 'Save' },
    { text: 'Save As' },
    { text: 'Save All' }
  ];

  const handleClick = (args) => {
    console.log('Primary action clicked');
  };

  const handleSelect = (args) => {
    console.log('Menu item selected:', args.item.text);
  };

  return (
    <SplitButtonComponent
      items={items}
      onClick={handleClick}
      select={handleSelect}
    >
      Save
    </SplitButtonComponent>
  );
}

export default App;

SplitButton with Icons

import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import '@syncfusion/ej2-react-splitbuttons/styles/material.css';

function SaveButton() {
  const items = [
    { text: 'Save', iconCss: 'e-icons e-save' },
    { text: 'Save As', iconCss: 'e-icons e-save-as' },
    { text: 'Save All', iconCss: 'e-icons e-save-all' }
  ];

  return (
    <SplitButtonComponent
      items={items}
      iconCss="e-icons e-save"
      cssClass="e-primary"
    >
      Save
    </SplitButtonComponent>
  );
}

export default SaveButton;

SplitButton with Event Handling

import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import { useState } from 'react';

function EventHandlingExample() {
  const [lastAction, setLastAction] = useState('');

  const items = [
    { text: 'Send Now' },
    { text: 'Schedule Send' },
    { text: 'Send Test' }
  ];

  const handlePrimaryClick = () => {
    setLastAction('Primary action: Send Now');
    console.log('Email sent immediately');
  };

  const handleMenuSelect = (args) => {
    setLastAction(`Menu selected: ${args.item.text}`);
    console.log('Selected:', args.item.text);
  };

  const handleBeforeOpen = (args) => {
    console.log('Dropdown menu opening');
  };

  return (
    <div>
      <SplitButtonComponent
        items={items}
        onClick={handlePrimaryClick}
        select={handleMenuSelect}
        beforeOpen={handleBeforeOpen}
        cssClass="e-primary"
      >
        Send
      </SplitButtonComponent>
      <p>{lastAction}</p>
    </div>
  );
}

export default EventHandlingExample;

SplitButton with Dynamic Items

import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import { useRef, useState } from 'react';

function DynamicItemsExample() {
  const [items, setItems] = useState([
    { text: 'Option 1' },
    { text: 'Option 2' }
  ]);

  const splitBtnRef = useRef(null);

  const addItem = () => {
    const newItem = { text: `Option ${items.length + 1}` };
    setItems([...items, newItem]);
  };

  const removeItem = () => {
    if (items.length > 1) {
      setItems(items.slice(0, -1));
    }
  };

  return (
    <div>
      <SplitButtonComponent
        ref={splitBtnRef}
        items={items}
        cssClass="e-primary"
      >
        Action
      </SplitButtonComponent>
      <div style={{ marginTop: '20px' }}>
        <button onClick={addItem}>Add Item</button>
        <button onClick={removeItem} style={{ marginLeft: '10px' }}>
          Remove Item
        </button>
      </div>
    </div>
  );
}

export default DynamicItemsExample;

SplitButton with Custom Template

import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';

function CustomTemplateExample() {
  const items = [
    { text: 'Bold', icon: 'B' },
    { text: 'Italic', icon: 'I' },
    { text: 'Underline', icon: 'U' }
  ];

  const itemTemplate = (props) => {
    return (
      <div style={{ display: 'flex', alignItems: 'center', padding: '8px' }}>
        <span style={{ 
          fontWeight: props.icon === 'B' ? 'bold' : 'normal',
          fontStyle: props.icon === 'I' ? 'italic' : 'normal',
          textDecoration: props.icon === 'U' ? 'underline' : 'none',
          marginRight: '8px'
        }}>
          {props.icon}
        </span>
        <span>{props.text}</span>
      </div>
    );
  };

  return (
    <SplitButtonComponent
      items={items}
      itemTemplate={itemTemplate}
      cssClass="e-primary"
    >
      Format Text
    </SplitButtonComponent>
  );
}

export default CustomTemplateExample;

Common Patterns

Save Variant Pattern

const items = [
  { text: 'Save', iconCss: 'e-icons e-save' },
  { separator: true },
  { text: 'Save As', iconCss: 'e-icons e-save-as' },
  { text: 'Save All', iconCss: 'e-icons e-save-all' }
];

Download Pattern

const items = [
  { text: 'Download PDF' },
  { text: 'Download Excel' },
  { text: 'Download CSV' },
  { separator: true },
  { text: 'Download All' }
];

Share Pattern

const items = [
  { text: 'Share Link', iconCss: 'e-icons e-link' },
  { text: 'Email', iconCss: 'e-icons e-mail' },
  { text: 'Print', iconCss: 'e-icons e-print' },
  { text: 'Export', iconCss: 'e-icons e-export' }
];

State Management Pattern

const [isLoading, setIsLoading] = useState(false);

const handleAction = async (args) => {
  setIsLoading(true);
  try {
    // Perform action
    await performAction(args.item.text);
  } finally {
    setIsLoading(false);
  }
};

Key Properties Overview

Next Steps

1. Installation & Setup → Read getting-started.md 2. Styling Options → Read types-and-styles.md 3. Features → Read splitbutton-features.md 4. Complete API → Read api-reference.md 5. Advanced Customization → Read customization.md 6. Accessibility → Read accessibility.md

Troubleshooting Quick Links

• Items not showing? → Check references/getting-started.md#css-imports
• Events not firing? → Check references/splitbutton-features.md#event-handling
• Styling issues? → Check references/types-and-styles.md
• Accessibility concerns? → Check references/accessibility.md

Resources

• Official Documentation: Syncfusion React SplitButton
• API Reference: Syncfusion SplitButton API
• Live Demos: Syncfusion React Demos

RadioButton

A skill for implementing the Syncfusion React RadioButtonComponent — 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/getting-started.md

• Package installation and CSS import
• Basic RadioButtonComponent rendering
• Grouping radio buttons with name prop
• Quick Vite + React project setup
• Enabling ripple effect

Label and Size

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

• Adding captions with the label property
• Positioning labels before/after with labelPosition
• Applying small size with cssClass="e-small"
• Default vs. compact size variants

Features and State

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

• Setting checked/unchecked state with checked
• Disabling a RadioButton with disabled
• Grouping and form submission with name and value
• RTL layout with enableRtl
• Handling state change via the change event
• Listening to component lifecycle with created

Style and Appearance

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

• Overriding default CSS classes
• Creating semantic color variants (primary, success, warning, etc.)
• Using cssClass for custom styles
• Theme Studio integration for global theming
• CSS class reference table

Accessibility

📄 Read: references/accessibility.md

• WCAG 2.2 and Section 508 compliance
• WAI-ARIA attributes (role, aria-checked, aria-disabled)
• Keyboard navigation shortcuts
• Screen reader support

API Reference

📄 Read: references/api.md

• All properties: checked, disabled, label, labelPosition, name, value, cssClass, enableRtl, enablePersistence, enableHtmlSanitizer, htmlAttributes, locale
• Methods: click(), destroy(), focusIn(), getSelectedValue()
• Events: change (ChangeArgs), created

Quick Start

import { enableRipple } from '@syncfusion/ej2-base';
import { RadioButtonComponent } from '@syncfusion/ej2-react-buttons';
import '@syncfusion/ej2-base/styles/tailwind3.css';
import '@syncfusion/ej2-buttons/styles/tailwind3.css';

enableRipple(true);

function App() {
  return (
    <ul>
      <li><RadioButtonComponent label="Option 1" name="group1" checked={true} /></li>
      <li><RadioButtonComponent label="Option 2" name="group1" /></li>
      <li><RadioButtonComponent label="Option 3" name="group1" /></li>
    </ul>
  );
}
export default App;

Common Patterns

Controlled state with change handler

import { RadioButtonComponent, ChangeArgs } from '@syncfusion/ej2-react-buttons';
import { useState } from 'react';

function App() {
  const [selected, setSelected] = useState('monthly');

  const handleChange = (args: ChangeArgs) => {
    setSelected(args.value);
  };

  return (
    <ul>
      <li>
        <RadioButtonComponent
          label="Monthly"
          name="plan"
          value="monthly"
          checked={selected === 'monthly'}
          change={handleChange}
        />
      </li>
      <li>
        <RadioButtonComponent
          label="Yearly"
          name="plan"
          value="yearly"
          checked={selected === 'yearly'}
          change={handleChange}
        />
      </li>
    </ul>
  );
}

Form submission with name/value

<form>
  <RadioButtonComponent name="payment" value="card"    label="Credit Card" checked={true} />
  <RadioButtonComponent name="payment" value="bank"    label="Net Banking" />
  <RadioButtonComponent name="payment" value="cod"     label="Cash on Delivery" />
  <button type="submit">Submit</button>
</form>

Disabled option in a group

<RadioButtonComponent label="Available"   name="seat" />
<RadioButtonComponent label="Unavailable" name="seat" disabled={true} />

Small compact size

<RadioButtonComponent label="Compact" name="size" cssClass="e-small" />

RTL support

<RadioButtonComponent label="خيار 1" name="rtl" enableRtl={true} />

Key Props Summary

Decision Guide

• User picks one of many options → Use name to group + value for each option
• Pre-select a default → Set checked={true} on the desired option
• Read which option is selected → Use change event (args.value) or call getSelectedValue()
• Prevent selection of an option → Use disabled={true}
• Dense UI layout → Add cssClass="e-small"
• RTL language UI → Use enableRtl={true}
• Custom color/branding → Use cssClass with custom CSS rules (see style-and-appearance.md)

Chips

The Syncfusion React Chips (ChipListComponent) component renders compact, interactive elements representing inputs, attributes, or actions. It supports single/multiple selection, deletion, drag-and-drop, avatars, icons, templates, and rich styling.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and package setup (@syncfusion/ej2-react-buttons)
• CSS/theme imports
• Rendering a basic chip or chip list
• Single chip vs. chip list with ChipsDirective / ChipDirective
• Running the application

Types and Selection

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

• Four chip types: Input, Choice, Filter, Action
• Single selection (selection="Single") — choice chips
• Multiple selection (selection="Multiple") — filter chips
• Deletable chips (enableDelete)
• Pre-selecting chips with selectedChips
• Click events (onClick) for action chips

Customization

📄 Read: references/customization.md

• Predefined styles: e-primary, e-success, e-info, e-warning, e-danger
• Leading icon (leadingIconCss, leadingIconUrl)
• Avatar image (avatarIconCss) and avatar text (avatarText)
• Trailing icon (trailingIconCss, trailingIconUrl)
• Outline chip (cssClass="e-outline")
• Custom chip template (template prop)
• htmlAttributes for custom HTML attributes

Drag and Drop

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

• Enabling drag and drop (allowDragAndDrop)
• Restricting drag area (dragArea)
• Drag events: dragStart, dragging, dragStop
• Cross-container drag and drop

Style Customization

📄 Read: references/style.md

• CSS overrides for chip text, icon, delete button
• Outline chip border styling
• Selected chip background and color
• Avatar text background styling
• Chip height/size customization

Accessibility

📄 Read: references/accessibility.md

• WCAG 2.2, Section 508, ADA compliance
• WAI-ARIA attributes (role, aria-selected, aria-disabled, etc.)
• Keyboard navigation shortcuts
• RTL support, screen reader support

API Reference

📄 Read: references/api.md

• All properties: text, chips, selection, enableDelete, cssClass, selectedChips, enabled, enableRtl, enablePersistence, allowDragAndDrop, dragArea, htmlAttributes, leadingIconCss, leadingIconUrl, avatarIconCss, avatarText, trailingIconCss, trailingIconUrl
• Methods: add(), remove(), find(), getSelectedChips(), select(), destroy()
• Events: click, beforeClick, created, delete, deleted, dragStart, dragging, dragStop

Quick Start

import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
import * as React from 'react';
import './App.css';

enableRipple(true);

function App() {
  return (
    <ChipListComponent id="chip-list">
      <ChipsDirective>
        <ChipDirective text="Angular" />
        <ChipDirective text="React" />
        <ChipDirective text="Vue" />
      </ChipsDirective>
    </ChipListComponent>
  );
}
export default App;

CSS (App.css):

@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-react-buttons/styles/tailwind3.css';

Common Patterns

Filter chips (multi-select)

<ChipListComponent selection="Multiple">
  <ChipsDirective>
    <ChipDirective text="React" />
    <ChipDirective text="Angular" />
    <ChipDirective text="Vue" />
  </ChipsDirective>
</ChipListComponent>

Deletable chips with event

<ChipListComponent enableDelete={true} delete={(e) => console.log('Deleting:', e.text)}>
  <ChipsDirective>
    <ChipDirective text="Tag One" />
    <ChipDirective text="Tag Two" />
  </ChipsDirective>
</ChipListComponent>

Chips with avatar initials

<ChipListComponent>
  <ChipsDirective>
    <ChipDirective text="Andrew" avatarText="A" />
    <ChipDirective text="Laura" avatarText="L" />
  </ChipsDirective>
</ChipListComponent>

Programmatic control (add/remove chips via ref)

const chipRef = React.useRef<ChipListComponent>(null);

// Add a chip
chipRef.current?.add('New Tag');

// Remove chip at index 0
chipRef.current?.remove([0]);

// Get selected
const selected = chipRef.current?.getSelectedChips();

Accessibility — Syncfusion React Button

Table of Contents

1. Compliance Summary 2. WAI-ARIA Attributes 3. Keyboard Interaction 4. Ensuring Accessibility in Your Implementation

---

Compliance Summary

The Syncfusion ButtonComponent fully adheres to the following accessibility standards:

---

WAI-ARIA Attributes

The ButtonComponent follows the WAI-ARIA Button Pattern.

Icon-only button — always add `aria-label`:

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

enableRipple(true);

function App() {
  return (
    <div>
      {/* Icon-only: no visible text — aria-label is required */}
      <ButtonComponent
        cssClass='e-round'
        iconCss='e-icons e-search'
        aria-label='Search'
      />

      {/* Button with text — aria-label is optional; text acts as the accessible name */}
      <ButtonComponent cssClass='e-primary'>
        Save
      </ButtonComponent>
    </div>
  );
}
export default App;

Predefined button styles (e.g., e-danger, e-success) convey meaning visually only. Rely on descriptive button text or aria-label — not color alone — for accessibility.

---

Keyboard Interaction

The ButtonComponent follows the WAI-ARIA keyboard interaction guidelines:

Ensure disabled buttons use disabled={true} (not just visual styling) so they are correctly excluded from the tab order.

---

Ensuring Accessibility in Your Implementation

Follow these best practices when using ButtonComponent:

1. Always label icon-only buttons. If a button has no visible text (e.g., a round icon button), pass aria-label describing the action:

   <ButtonComponent cssClass='e-round' iconCss='e-icons e-edit' aria-label='Edit record' />

2. Use meaningful button text. Predefined styles like e-danger are visual cues only — screen readers announce the text content, not the style. Use text like "Delete" rather than "Button".

3. Manage disabled state correctly. Use the disabled prop so the browser excludes the button from the focus order and announces it as unavailable:

   <ButtonComponent disabled={true}>Submit</ButtonComponent>

4. Avoid relying on color alone. Always combine color styles with descriptive text or icons. For example, a "danger" delete button should say "Delete" — not just be red.

5. Validate with tooling. Test your implementation with:

• IBM Accessibility Checker
• axe-core
• Browser developer tools accessibility panel
• A screen reader (NVDA, JAWS, VoiceOver)

API Reference — Syncfusion React ButtonComponent

Table of Contents

1. Import 2. Properties 3. Methods 4. Events 5. Usage Examples

---

Import

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

JSX usage:

<ButtonComponent>Button</ButtonComponent>

---

Properties

content — string

Defines the text content rendered inside the button element.

• Default: ""
• Note: Text can also be supplied as JSX children (<ButtonComponent>Text</ButtonComponent>). When both are used, content takes precedence.

<ButtonComponent content="Save" cssClass="e-primary" />

---

cssClass — string

Defines one or more CSS classes (space-separated) to apply to the button element. Used to control button types, color styles, size, and custom appearance.

• Default: ""
• Common values: e-primary, e-success, e-info, e-warning, e-danger, e-link, e-flat, e-outline, e-round, e-small, e-block, e-round-corner

<ButtonComponent cssClass="e-primary">Primary</ButtonComponent>
<ButtonComponent cssClass="e-small e-outline">Small Outline</ButtonComponent>

---

disabled — boolean

Specifies whether the button is disabled. A disabled button is not interactive, cannot receive focus, and does not trigger click events.

• Default: false

<ButtonComponent disabled={true}>Disabled</ButtonComponent>

---

enableHtmlSanitizer — boolean

When true, the component sanitizes untrusted HTML strings and scripts in the content property before rendering, preventing XSS vulnerabilities.

• Default: true

Keep this as true (default) unless you explicitly need to render trusted HTML markup in the button label. Disabling it without proper validation creates a security risk.

<ButtonComponent enableHtmlSanitizer={false} content="<b>Bold</b>" />

---

enablePersistence — boolean

When true, the component's state is persisted across page reloads using browser local storage.

• Default: false

<ButtonComponent enablePersistence={true} isToggle={true}>Toggle</ButtonComponent>

---

enableRtl — boolean

When true, renders the component in right-to-left (RTL) direction. Useful for Arabic, Hebrew, and other RTL scripts.

• Default: false

<ButtonComponent enableRtl={true} iconCss="e-btn-icons e-setting-icon">Settings</ButtonComponent>

---

iconCss — string

Defines one or more CSS classes for an icon to display within the button. Supports Syncfusion built-in icons (e-icons) and third-party icon libraries.

• Default: ""

<ButtonComponent iconCss="e-icons e-save">Save</ButtonComponent>

---

iconPosition — string | IconPosition

Controls where the icon appears relative to the button text.

• Default: IconPosition.Left ("Left")
• Accepted values: "Left" | "Right"

<ButtonComponent iconCss="e-icons e-send" iconPosition="Right">Send</ButtonComponent>

---

isPrimary — boolean

Enhances the visual appearance of the button with an emphasized primary style when set to true.

• Default: false

isPrimary={true} is functionally similar to cssClass='e-primary' but uses a boolean prop. Prefer cssClass='e-primary' for consistency with other color styles.

<ButtonComponent isPrimary={true}>Primary</ButtonComponent>

---

isToggle — boolean

Makes the button a toggle button. When clicked, it transitions between a normal and active state. In the active state, Syncfusion applies the e-active CSS class to the element.

• Default: false

<ButtonComponent isToggle={true} cssClass="e-flat">Toggle Me</ButtonComponent>

---

Methods

Methods are called on the component instance obtained via ref.

click() — void

Programmatically triggers the button's native click action.

let btnRef: ButtonComponent | null = null;

function triggerClick(): void {
  if (btnRef) btnRef.click();
}

<ButtonComponent ref={(scope) => { btnRef = scope; }}>Action</ButtonComponent>
<button onClick={triggerClick}>Trigger via code</button>

---

focusIn() — void

Programmatically sets focus to the button element (native focus method).

let btnRef: ButtonComponent | null = null;

function focusButton(): void {
  if (btnRef) btnRef.focusIn();
}

<ButtonComponent ref={(scope) => { btnRef = scope; }}>Focusable</ButtonComponent>
<button onClick={focusButton}>Focus the button</button>

---

destroy() — void

Destroys the ButtonComponent instance and cleans up event listeners and DOM modifications. Call this before unmounting if managing the component lifecycle manually.

let btnRef: ButtonComponent | null = null;

function cleanup(): void {
  if (btnRef) btnRef.destroy();
}

In React, destroy() is typically not needed — React's unmounting handles cleanup. Use it only in advanced scenarios where you manually control the component lifecycle outside the React tree.

---

Events

created — EmitType<Event>

Fires once after the component has fully rendered. Use it for post-render DOM operations such as setting title attributes or programmatic focus.

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
import * as React from 'react';

enableRipple(true);

function App() {
  let btnRef: ButtonComponent | null = null;

  function onCreated(): void {
    if (btnRef && btnRef.element) {
      (btnRef.element as HTMLElement).setAttribute('title', 'Click to submit');
    }
  }

  return (
    <ButtonComponent
      ref={(scope) => { btnRef = scope; }}
      created={onCreated}
      isPrimary={true}
    >
      Submit
    </ButtonComponent>
  );
}
export default App;

---

Usage Examples

All properties in one component

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

enableRipple(true);

function App() {
  let btnRef: ButtonComponent | null = null;

  function onCreated(): void {
    if (btnRef && btnRef.element) {
      (btnRef.element as HTMLElement).setAttribute('title', 'Save your changes');
    }
  }

  return (
    <ButtonComponent
      content="Save"
      cssClass="e-primary"
      disabled={false}
      enableHtmlSanitizer={true}
      enablePersistence={false}
      enableRtl={false}
      iconCss="e-icons e-save"
      iconPosition="Left"
      isPrimary={false}
      isToggle={false}
      created={onCreated}
      ref={(scope) => { btnRef = scope; }}
    />
  );
}
export default App;

Toggle button with state tracking

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { useState } from 'react';

enableRipple(true);

function App() {
  const [isPlaying, setIsPlaying] = useState(false);

  return (
    <ButtonComponent
      isToggle={true}
      cssClass="e-flat"
      iconCss={isPlaying ? 'e-btn-sb-icon e-pause-icon' : 'e-btn-sb-icon e-play-icon'}
      content={isPlaying ? 'Pause' : 'Play'}
      onClick={() => setIsPlaying(!isPlaying)}
    />
  );
}
export default App;

Getting Started — Syncfusion React Button

Table of Contents

1. Prerequisites 2. Installation 3. CSS Imports 4. Rendering the Button 5. Enabling Ripple Effects 6. Click Handling 7. Using `ref` to Access the Instance

---

Prerequisites

• React 16.8+
• Node.js 14+
• A Vite or Create React App project

Create a new Vite project:

# JavaScript
npm create vite@latest my-app -- --template react
cd my-app
npm run dev

# TypeScript
npm create vite@latest my-app -- --template react-ts
cd my-app
npm run dev

---

Installation

Install the Syncfusion Button package:

npm install @syncfusion/ej2-react-buttons --save

The --save flag adds the package to the dependencies section of package.json.

---

CSS Imports

Add the required theme stylesheets to src/App.css:

@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-react-buttons/styles/tailwind3.css";

Import App.css in src/App.tsx:

import './App.css';

Available themes: tailwind3, bootstrap5, material3, fluent2. Replace tailwind3 with your preferred theme name in both import paths.

---

Rendering the Button

The ButtonComponent is the core element. Place it in src/App.tsx:

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import './App.css';

function App() {
  return (
    <div>
      <ButtonComponent>Button</ButtonComponent>
    </div>
  );
}
export default App;

Button text can be supplied as children or via the content prop:

// Using children
<ButtonComponent>Click Me</ButtonComponent>

// Using the content prop
<ButtonComponent content="Click Me" />

---

Enabling Ripple Effects

Import enableRipple from @syncfusion/ej2-base and call it once before rendering — typically at the top of App.tsx:

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import './App.css';

enableRipple(true);   // Call once; applies ripple to all Syncfusion components

function App() {
  return (
    <ButtonComponent cssClass='e-primary'>Save</ButtonComponent>
  );
}
export default App;

Call enableRipple(true) before ReactDOM.render / createRoot. Calling it multiple times is safe but unnecessary.

---

Click Handling

Handle clicks using the standard React onClick prop:

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

enableRipple(true);

function App() {
  function handleClick(): void {
    alert('Button clicked!');
  }

  return (
    <ButtonComponent cssClass='e-primary' onClick={handleClick}>
      Submit
    </ButtonComponent>
  );
}
export default App;

---

Using ref to Access the Instance

Use a React ref to call imperative methods (click, focusIn, destroy) or access element:

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

enableRipple(true);

function App() {
  let btnRef: ButtonComponent | null = null;

  function onCreated(): void {
    // Access the underlying DOM element after component mounts
    if (btnRef && btnRef.element) {
      btnRef.element.setAttribute('title', 'Primary Button');
    }
  }

  return (
    <ButtonComponent
      ref={(scope) => { btnRef = scope; }}
      created={onCreated}
      isPrimary={true}
    >
      Button
    </ButtonComponent>
  );
}
export default App;

The created event fires once rendering is complete — use it for post-render DOM operations such as setting title attributes.

How-To Patterns — Syncfusion React Button

Table of Contents

1. Create a Block (Full-Width) Button 2. Create a Rounded-Corner Button 3. Add a Navigation Link to a Button 4. Customize Button Appearance with CSS 5. Style Native Input and Anchor Elements as Buttons 6. Set the Disabled State 7. Enable Right-to-Left (RTL) Support 8. Add a Tooltip on Hover 9. Implement a Repeat Button

---

Create a Block (Full-Width) Button

A block button expands to fill the full width of its parent container. Set cssClass='e-block'.

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

enableRipple(true);

function App() {
  return (
    <div>
      {/* Default block button */}
      <ButtonComponent cssClass='e-block'>Block Button</ButtonComponent>

      {/* Primary block button */}
      <ButtonComponent cssClass='e-block' isPrimary={true}>Block Button</ButtonComponent>

      {/* Success block button — combine e-block with a color style */}
      <ButtonComponent cssClass='e-block e-success'>Block Button</ButtonComponent>
    </div>
  );
}
export default App;

---

Create a Rounded-Corner Button

Apply the e-round-corner CSS class (or a custom class with border-radius) via cssClass. The built-in class uses 5px border radius.

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

enableRipple(true);

function App() {
  return (
    <ButtonComponent cssClass='e-round-corner'>Button</ButtonComponent>
  );
}
export default App;

For a custom radius, define a CSS class:

/* styles.css */
.e-custom-radius {
  border-radius: 20px;
}

<ButtonComponent cssClass='e-custom-radius'>Pill Button</ButtonComponent>

---

Add a Navigation Link to a Button

Style a button as a hyperlink using cssClass='e-link' and open the URL in the click handler using window.open().

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

enableRipple(true);

function App() {
  function btnClick(): void {
    window.open('https://www.syncfusion.com');
  }

  return (
    <div>
      <ButtonComponent cssClass='e-link' onClick={btnClick}>Go to Syncfusion</ButtonComponent>
    </div>
  );
}
export default App;

Use window.open(url, '_blank') to open in a new tab.

---

Customize Button Appearance with CSS

Define a custom CSS class and assign it via cssClass. You can target all button states (default, hover, focus, active).

/* styles.css */
.e-custom {
  background-color: #6c5ce7;
  color: #ffffff;
  height: 40px;
  border-radius: 8px;
  border: none;
}

.e-custom:hover {
  background-color: #a29bfe;
}

.e-custom:focus {
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.4);
}

.e-custom:active {
  background-color: #4834d4;
}

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import './styles.css';

enableRipple(true);

function App() {
  return (
    <ButtonComponent cssClass='e-custom'>Custom</ButtonComponent>
  );
}
export default App;

For systematic theme customization, use Syncfusion Theme Studio.

---

Style Native Input and Anchor Elements as Buttons

Apply the Syncfusion button CSS classes (e-btn) directly on native HTML <input> and <a> elements — no ButtonComponent required:

<!-- Input styled as a link button -->
<input type="button" value="Input Button" class="e-btn e-link" />

<!-- Anchor styled as a primary button -->
<a href="https://www.syncfusion.com" class="e-btn e-primary">Anchor Button</a>

This is useful when you need standard HTML elements to match the Syncfusion button appearance without using the React component.

---

Set the Disabled State

Set disabled={true} to prevent interaction. A disabled button cannot receive focus or trigger click events.

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

enableRipple(true);

function App() {
  return (
    <div>
      <ButtonComponent disabled={true}>Disabled</ButtonComponent>
      <ButtonComponent disabled={true} cssClass='e-primary'>Disabled Primary</ButtonComponent>
    </div>
  );
}
export default App;

To toggle disabled dynamically, use React state:

const [isDisabled, setIsDisabled] = React.useState(false);

<ButtonComponent disabled={isDisabled}>Submit</ButtonComponent>
<ButtonComponent onClick={() => setIsDisabled(true)}>Disable Submit</ButtonComponent>

---

Enable Right-to-Left (RTL) Support

Set enableRtl={true} to flip the layout for RTL languages such as Arabic or Hebrew. This mirrors the text and icon directions.

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

enableRipple(true);

function App() {
  return (
    <div>
      <ButtonComponent enableRtl={true} iconCss='e-btn-icons e-setting-icon'>
        Settings
      </ButtonComponent>
    </div>
  );
}
export default App;

---

Add a Tooltip on Hover

Set the title attribute on the button's underlying DOM element after rendering. Access the element via the created event and a ref.

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

enableRipple(true);

function App() {
  let btnRef: ButtonComponent | null = null;

  function onCreated(): void {
    if (btnRef && btnRef.element) {
      (btnRef.element as HTMLElement).setAttribute('title', 'Click to save changes');
    }
  }

  return (
    <div>
      <ButtonComponent
        id='btn'
        ref={(scope) => { btnRef = scope; }}
        created={onCreated}
        isPrimary={true}
      >
        Save
      </ButtonComponent>
    </div>
  );
}
export default App;

For rich tooltip UIs, consider the Syncfusion TooltipComponent — the title attribute renders a native browser tooltip only.

---

Implement a Repeat Button

A repeat button continuously fires its action while held down, useful for incrementing values or controlling media.

The pattern uses mousedown/mouseup (and touchstart/touchend) events combined with setInterval:

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

enableRipple(true);

function App() {
  let btnRef: ButtonComponent | null = null;
  let timeout: ReturnType<typeof setInterval> | null = null;
  let count = 0;

  function onCreated(): void {
    if (!btnRef || !btnRef.element) return;
    const elem = btnRef.element as HTMLElement;
    elem.addEventListener('mousedown', startRepeat);
    elem.addEventListener('mouseup', stopRepeat);
    elem.addEventListener('touchstart', startRepeat);
    elem.addEventListener('touchend', stopRepeat);
  }

  function startRepeat(): void {
    timeout = setInterval(() => {
      count++;
      console.log(`Repeat action triggered: ${count}`);
    }, 200);
  }

  function stopRepeat(): void {
    if (timeout) {
      clearInterval(timeout);
      timeout = null;
    }
  }

  return (
    <ButtonComponent
      id='repeat-btn'
      ref={(scope) => { btnRef = scope; }}
      created={onCreated}
      content='Hold Me'
    />
  );
}
export default App;

Always clear the interval in mouseup/touchend to avoid memory leaks. Also handle mouseleave if the button should stop when the cursor leaves its bounds.

Style and Appearance — Syncfusion React Button

Table of Contents

1. Available CSS Classes 2. Overriding Default Styles 3. Custom Theme with Theme Studio

---

Available CSS Classes

The following CSS classes are available for customizing and overriding button styles. Apply them via the cssClass prop or by targeting the class names in your stylesheets.

---

Overriding Default Styles

Override Syncfusion's built-in styles by targeting the class names in your own stylesheet. Place your overrides after the Syncfusion CSS imports to ensure specificity.

Example — change background, text color, size, and corner style for all states:

/* styles.css — loaded after Syncfusion CSS imports */

/* Default state */
.e-btn.e-custom {
  background-color: #6c5ce7;
  color: #ffffff;
  height: 44px;
  min-width: 120px;
  border-radius: 8px;
  border: none;
  font-weight: 600;
}

/* Hover state */
.e-btn.e-custom:hover {
  background-color: #a29bfe;
  color: #ffffff;
}

/* Focus state */
.e-btn.e-custom:focus {
  background-color: #6c5ce7;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.35);
}

/* Active (pressed) state */
.e-btn.e-custom:active {
  background-color: #4834d4;
}

Apply the class in the component:

<ButtonComponent cssClass='e-custom'>Custom Button</ButtonComponent>

Use double class selectors (.e-btn.e-custom) to increase specificity and reliably override Syncfusion's default rules.

---

Custom Theme with Theme Studio

For full-scale theme customization across all Syncfusion components, use Syncfusion Theme Studio:

1. Open Theme Studio and select your base theme (Material, Bootstrap, Tailwind, Fluent, etc.). 2. Customize global color tokens — these cascade to all components including buttons. 3. Download the generated CSS file. 4. Replace the default Syncfusion CSS import in App.css with the downloaded file.

This approach is preferable to manual CSS overrides when building a consistent design system.

Types and Styles — Syncfusion React Button

Table of Contents

1. Button Styles (Color Variants) 2. Flat Button 3. Outline Button 4. Round Button 5. Toggle Button 6. Basic HTML Button Types 7. Icons

• Font Icons
• SVG Icons
• Icon Position

8. Button Sizes

---

Button Styles (Color Variants)

Apply predefined semantic color styles using the cssClass prop. These convey intent visually but do not alter functional behavior — always use meaningful button text for assistive technology users.

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

enableRipple(true);

function App() {
  return (
    <div>
      <ButtonComponent cssClass='e-primary'>Primary</ButtonComponent>
      <ButtonComponent cssClass='e-success'>Success</ButtonComponent>
      <ButtonComponent cssClass='e-info'>Info</ButtonComponent>
      <ButtonComponent cssClass='e-warning'>Warning</ButtonComponent>
      <ButtonComponent cssClass='e-danger'>Danger</ButtonComponent>
      <ButtonComponent cssClass='e-link'>Link</ButtonComponent>
    </div>
  );
}
export default App;

Multiple classes can be combined (space-separated):

<ButtonComponent cssClass='e-small e-primary'>Small Primary</ButtonComponent>

---

Flat Button

A flat button has no background color — useful for secondary or low-emphasis actions.

<ButtonComponent cssClass='e-flat'>Flat</ButtonComponent>

---

Outline Button

An outline button has a visible border with a transparent background.

<ButtonComponent cssClass='e-outline'>Outline</ButtonComponent>

---

Round Button

A round (circular) button typically contains only an icon. Set cssClass='e-round' and supply an icon via iconCss.

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

enableRipple(true);

function App() {
  return (
    // isPrimary enhances the visual appearance
    <ButtonComponent cssClass='e-round' iconCss='e-icons e-plus-icon' isPrimary={true} />
  );
}
export default App;

Use isPrimary={true} with round buttons to apply enhanced visual styling.

---

Toggle Button

A toggle button switches between two states (normal ↔ active). Set isToggle={true}. When active, the e-active CSS class is applied automatically.

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { useState } from 'react';
import * as React from 'react';

enableRipple(true);

function App() {
  const [state, setState] = useState({ content: 'Play', iconCss: 'e-btn-sb-icon e-play-icon' });

  function btnClick(): void {
    if (state.content === 'Play') {
      setState({ content: 'Pause', iconCss: 'e-btn-sb-icon e-pause-icon' });
    } else {
      setState({ content: 'Play', iconCss: 'e-btn-sb-icon e-play-icon' });
    }
  }

  return (
    <ButtonComponent
      cssClass='e-flat'
      iconCss={state.iconCss}
      content={state.content}
      isToggle={true}
      onClick={btnClick}
    />
  );
}
export default App;

The e-active class is applied by Syncfusion when the button is in the toggled state. Update your own React state independently if you need to track the toggle state for logic purposes.

---

Basic HTML Button Types

Use the native HTML type attribute to control form submission behavior:

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

enableRipple(true);

function App() {
  return (
    <form>
      <ButtonComponent type='submit'>Submit</ButtonComponent>
      <ButtonComponent type='reset'>Reset</ButtonComponent>
    </form>
  );
}
export default App;

---

Icons

Font Icons

Add an icon using the iconCss prop. Syncfusion's built-in icon set uses the e-icons base class.

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

enableRipple(true);

function App() {
  return (
    <div>
      {/* Icon on the left (default) */}
      <ButtonComponent iconCss='e-btn-sb-icon e-prev-icon'>Previous</ButtonComponent>

      {/* Icon on the right */}
      <ButtonComponent iconCss='e-btn-sb-icon e-stop-icon' iconPosition='Right'>Stop</ButtonComponent>
    </div>
  );
}
export default App;

The e-icons class loads Syncfusion's Essential JS 2 built-in icon font. Third-party icon libraries (e.g., Font Awesome) can also be used by supplying the appropriate CSS class.

SVG Icons

SVG images can also be loaded via iconCss by referencing a custom CSS class that defines the SVG as a background or mask image:

<ButtonComponent iconCss='e-search-icon' />

Define .e-search-icon in your CSS with the desired height, width, and SVG background-image.

Icon Position

Control icon placement with iconPosition. Accepted values: 'Left' (default) and 'Right'.

<ButtonComponent iconCss='e-icons e-save' iconPosition='Left'>Save</ButtonComponent>
<ButtonComponent iconCss='e-icons e-delete' iconPosition='Right'>Delete</ButtonComponent>

---

Button Sizes

Two sizes are available — normal (default) and small. Use cssClass='e-small' to render a compact button.

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

enableRipple(true);

function App() {
  return (
    <div>
      <ButtonComponent cssClass='e-small'>Small</ButtonComponent>
      <ButtonComponent>Normal</ButtonComponent>
    </div>
  );
}
export default App;

Accessibility — Syncfusion React ButtonGroup

Compliance Summary

The ButtonGroup component meets the following accessibility standards:

Keyboard Interaction

Normal (Button) Behavior

Checkbox Behavior

Radio Button Behavior

ARIA Role

Add role="group" to the ButtonGroup container for proper semantic grouping. This helps screen readers announce the component as a group of related controls:

<div className='e-btn-group' role='group'>
  <ButtonComponent>HTML</ButtonComponent>
  <ButtonComponent>CSS</ButtonComponent>
  <ButtonComponent>Javascript</ButtonComponent>
</div>

Validation Tools

The ButtonGroup's accessibility is validated using:

• accessibility-checker
• axe-core

Getting Started — Syncfusion React ButtonGroup

Table of Contents

• Prerequisites
• Installation
• Adding CSS References
• Basic ButtonGroup
• Running the Application

Prerequisites

Create a React application using Vite:

# JavaScript
npm create vite@latest my-app -- --template react
cd my-app
npm run dev

# TypeScript
npm create vite@latest my-app -- --template react-ts
cd my-app
npm run dev

Installation

Install the Syncfusion buttons package:

npm install @syncfusion/ej2-react-buttons --save

For nesting (DropDownButton / SplitButton) or the createButtonGroup utility, also install:

npm install @syncfusion/ej2-react-splitbuttons --save

Adding CSS References

Add the following imports to src/App.css:

@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";

Then import the CSS file in src/App.tsx (or src/App.jsx):

import './App.css';

Basic ButtonGroup

The ButtonGroup is a pure CSS component — wrap ButtonComponent elements inside a div with the e-btn-group class. No JavaScript initialization is needed for basic usage.

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import './App.css';

function App() {
  return (
    <div className='e-btn-group'>
      <ButtonComponent>HTML</ButtonComponent>
      <ButtonComponent>CSS</ButtonComponent>
      <ButtonComponent>Javascript</ButtonComponent>
    </div>
  );
}
export default App;

Key point: The e-btn-group class on the container is what creates the visual grouping. Each child ButtonComponent is styled as a grouped button automatically.

Running the Application

npm run dev

The development server starts and the ButtonGroup renders in the browser.

See Also

• For selection behaviors (radio/checkbox), see selection-and-nesting.md
• For the createButtonGroup utility function approach, see how-to.md

How-To Guide — Syncfusion React ButtonGroup

Table of Contents

• Add Icons to Buttons
• Rounded Corners
• Disable Individual or All Buttons
• Enable Ripple Effect
• Enable RTL Support
• Vertical Orientation
• Form Submit with ButtonGroup
• Initialize Using createButtonGroup Utility

---

Add Icons to Buttons

Use the iconCss property on ButtonComponent to display an icon alongside button text. Pass one or more CSS class names (space-separated) that map to icon font classes:

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render ButtonGroup with icons.
function App() {
  return (
    <div>
      <div className='e-btn-group'>
        <ButtonComponent iconCss='e-icons e-left-icon'>HTML</ButtonComponent>
        <ButtonComponent iconCss='e-icons e-middle-icon'>CSS</ButtonComponent>
        <ButtonComponent iconCss='e-icons e-right-icon'>Javascript</ButtonComponent>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));

---

Rounded Corners

Apply the e-round-corner class to the container div to add border-radius styling to the entire group:

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render ButtonGroup with rounded corner.
function App() {
  return (
    <div>
      <div className='e-btn-group e-round-corner'>
        <ButtonComponent>HTML</ButtonComponent>
        <ButtonComponent>CSS</ButtonComponent>
        <ButtonComponent>Javascript</ButtonComponent>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));

---

Disable Individual or All Buttons

Disable a single button

Set disabled={true} on a specific ButtonComponent to disable only that button:

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To disable single button/whole ButtonGroup.
function App() {
  return (
    <div>
      <div className='e-btn-group'>
        <ButtonComponent>HTML</ButtonComponent>
        <ButtonComponent disabled={true}>CSS</ButtonComponent>
        <ButtonComponent>Javascript</ButtonComponent>
      </div>
      <div className='e-btn-group'>
        <ButtonComponent disabled={true}>HTML</ButtonComponent>
        <ButtonComponent disabled={true}>CSS</ButtonComponent>
        <ButtonComponent disabled={true}>Javascript</ButtonComponent>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));

For radio/checkbox type ButtonGroups, add the disabled attribute directly to the <input> element to disable individual options.

---

Enable Ripple Effect

Import enableRipple from @syncfusion/ej2-base and call it with true before rendering the component:

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To enable ripple in ButtonGroup.
function App() {
  return (
    <div>
      <div className='e-btn-group'>
        <ButtonComponent>HTML</ButtonComponent>
        <ButtonComponent>CSS</ButtonComponent>
        <ButtonComponent>Javascript</ButtonComponent>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));

---

Enable RTL Support

Add the e-rtl class to the container div to flip the button order for right-to-left languages:

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render ButtonGroup with RTL.
function App() {
  return (
    <div>
      <div className='e-btn-group e-rtl'>
        <ButtonComponent>HTML</ButtonComponent>
        <ButtonComponent>CSS</ButtonComponent>
        <ButtonComponent>Javascript</ButtonComponent>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));

---

Vertical Orientation

Add the e-vertical class to the container div to stack buttons vertically instead of horizontally:

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render ButtonGroup with vertical orientation.
function App() {
  return (
    <div>
      <div className='e-btn-group e-vertical'>
        <ButtonComponent>HTML</ButtonComponent>
        <ButtonComponent>CSS</ButtonComponent>
        <ButtonComponent>Javascript</ButtonComponent>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));

Vertical orientation does not support SplitButton nesting.

---

Form Submit with ButtonGroup

Use the name attribute on radio/checkbox inputs to group them for form submission. The value of the checked option is submitted with the form. Disabled inputs are excluded from submission.

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render ButtonGroup in form.
function App() {
  function componentDidMount(): void {
    (document.getElementById('female') as HTMLInputElement).checked = true;
  }
  return (
    <div>
      <form>
        <div className='e-btn-group'>
          <input type="radio" id="male" name="gender" value="male"/>
          <label className="e-btn" htmlFor="male">Male</label>
          <input type="radio" id="female" name="gender" value="female"/>
          <label className="e-btn" htmlFor="female">Female</label>
          <input type="radio" id="transgender" name="gender" value="transgender"/>
          <label className="e-btn" htmlFor="transgender">Transgender</label>
        </div>
        <ButtonComponent isPrimary={true}>Submit</ButtonComponent>
      </form>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));

---

Initialize Using createButtonGroup Utility

The createButtonGroup utility function from @syncfusion/ej2-splitbuttons provides an alternative approach to initialize ButtonGroup with minimal JSX. It applies ButtonGroup styling to plain <button> or <input> elements programmatically.

Call createButtonGroup inside a useEffect hook so it runs after the DOM is ready. Pass the container selector and a buttons array with a content property for each button.

import { createButtonGroup } from '@syncfusion/ej2-splitbuttons';
import { useEffect } from "react";
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render ButtonGroup using `util` function.
function App() {
  useEffect(() => {
    createButtonGroup('#basic', {
      buttons: [
          { content: 'HTML' },
          { content: 'CSS' },
          { content: 'Javascript'}
      ]
    });

    createButtonGroup('#checkbox', {
      buttons: [
          { content: 'Bold' },
          { content: 'Italic' },
          { content: 'Undeline'}
      ]
    });

    createButtonGroup('#radio', {
      buttons: [
          { content: 'Left' },
          { content: 'Center' },
          { content: 'Right'}
      ]
    });
  }, []);

  return (
    <div>
      <h5>Normal behavior</h5>
      <div id='basic'>
        <button/>
        <button/>
        <button/>
      </div>
      <h5>Checkbox type behavior</h5>
      <div id='checkbox'>
        <input type="checkbox" id="checkbold" name="font" value='bold' />
        <input type="checkbox" id="checkitalic" name="font" value='italic' />
        <input type="checkbox" id="checkunderline" name="font" value='underline' />
      </div>
      <h5>Radiobutton type behavior</h5>
      <div id='radio'>
        <input type="radio" id="radioleft" name="align" value='left'/>
        <input type="radio" id="radiomiddle" name="align" value='middle'/>
        <input type="radio" id="radioright" name="align" value='right'/>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));

If null is passed for a button option, that button is skipped by createButtonGroup.

Selection and Nesting — Syncfusion React ButtonGroup

Table of Contents

• Single Selection (Radio Type)
• Multiple Selection (Checkbox Type)
• Set Initial Selected State
• Nesting with DropDownButton
• Nesting with SplitButton

Single Selection (Radio Type)

Radio-type ButtonGroup allows only one button to be active at a time. Create it using <input type="radio"> elements paired with <label> elements:

• Each <input> gets a unique id and a shared name to form the radio group.
• Each <label> has htmlFor matching the input's id and the e-btn class to style it as a button.

import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render radio type ButtonGroup.
function App() {
  return (
    <div>
      <div className='e-btn-group'>
          <input type="radio" id="radioleft" name="align" value="left" />
          <label className="e-btn" htmlFor="radioleft">Left</label>
          <input type="radio" id="radiomiddle" name="align" value="middle" />
          <label className="e-btn" htmlFor="radiomiddle">Center</label>
          <input type="radio" id="radioright" name="align" value="right"/>
          <label className="e-btn" htmlFor="radioright">Right</label>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));

Multiple Selection (Checkbox Type)

Checkbox-type ButtonGroup allows multiple buttons to be selected simultaneously. Create it using <input type="checkbox"> elements paired with <label> elements:

import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render checkbox type ButtonGroup.
function App() {
  return (
    <div>
      <div className='e-btn-group'>
          <input type="checkbox" id="checkbold" name="font" value="bold"/>
          <label className="e-btn" htmlFor="checkbold">Bold</label>
          <input type="checkbox" id="checkitalic" name="font" value="italic" />
          <label className="e-btn" htmlFor="checkitalic">Italic</label>
          <input type="checkbox" id="checkline" name="font" value="underline"/>
          <label className="e-btn" htmlFor="checkline">Underline</label>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));

Set Initial Selected State

To show a button as selected on initial render, add the checked={true} attribute to the corresponding <input> element:

import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render checkbox type ButtonGroup with pre-selected state.
function App() {
  return (
    <div>
      <div className='e-btn-group'>
          <input type="checkbox" id="checkbold" name="font" value="bold" checked={true}/>
          <label className="e-btn" htmlFor="checkbold">Bold</label>
          <input type="checkbox" id="checkitalic" name="font" value="italic" />
          <label className="e-btn" htmlFor="checkitalic">Italic</label>
          <input type="checkbox" id="checkline" name="font" value="underline"/>
          <label className="e-btn" htmlFor="checkline">Underline</label>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));

This works the same way for radio-type ButtonGroups — add checked={true} to the radio input that should be initially active.

Nesting with DropDownButton

Import DropDownButtonComponent from @syncfusion/ej2-react-splitbuttons and place it inside the e-btn-group container alongside ButtonComponent elements:

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';

// To render ButtonGroup with DropDownButton nesting.
function App() {
  let items: ItemModel[] = [
    { text: 'Learn SQL' },
    { text: 'Learn PHP' },
    { text: 'Learn Bootstrap' }
  ];

  return (
    <div>
      <div className='e-btn-group'>
          <ButtonComponent>HTML</ButtonComponent>
          <ButtonComponent>CSS</ButtonComponent>
          <ButtonComponent>Javascript</ButtonComponent>
          <DropDownButtonComponent id="dropdownelement" items={items}> More </DropDownButtonComponent>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));

Nesting with SplitButton

Import SplitButtonComponent from @syncfusion/ej2-react-splitbuttons and place it inside the e-btn-group container:

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SplitButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';

// To render ButtonGroup with SplitButton nesting.
function App() {
    let items: ItemModel[] = [
    { text: 'Paste' },
    { text: 'Paste Text' },
    { text: 'Paste Special' }
  ];

  return (
    <div>
      <div className='e-btn-group'>
          <ButtonComponent>Cut</ButtonComponent>
          <ButtonComponent>Copy</ButtonComponent>
          <SplitButtonComponent id="splitbuttonelement" items={items}> Paste </SplitButtonComponent>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));

SplitButton nesting is not supported in vertical orientation (e-vertical).

Style and Appearance — Syncfusion React ButtonGroup

CSS Classes Reference

Customize ButtonGroup appearance by overriding its default CSS classes:

Custom CSS Overrides

Override any class in your stylesheet to change colors, borders, padding, or other visual properties. For example, to change the default button background:

.e-btn-group .e-btn {
  background-color: #your-color;
  border-color: #your-border-color;
}

Theme Studio

Generate custom themes for the ButtonGroup using Syncfusion Theme Studio. Theme Studio provides a visual interface to customize all component tokens and export ready-to-use CSS.

Types and Styles — Syncfusion React ButtonGroup

Table of Contents

• Outline ButtonGroup
• Predefined Styles
• Mixing Styles in a Group

Outline ButtonGroup

An outline ButtonGroup displays buttons with borders and transparent backgrounds. Apply the e-outline class to both the container div and to each ButtonComponent via the cssClass property.

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render outline ButtonGroup.
function App() {
  return (
    <div>
      <div className='e-btn-group e-outline'>
        <ButtonComponent cssClass='e-outline'>HTML</ButtonComponent>
        <ButtonComponent cssClass='e-outline'>CSS</ButtonComponent>
        <ButtonComponent cssClass='e-outline'>Javascript</ButtonComponent>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));

The ButtonGroup does not support flat or round button types. Use predefined styles for visual customization.

Predefined Styles

Apply color-coded styles to individual buttons using the cssClass property on ButtonComponent. Available classes:

Each class gives the button a distinct background color so users can quickly understand the action's intent.

Mixing Styles in a Group

Different buttons within the same group can each have different styles:

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render ButtonGroup with different styles.
function App() {
  return (
    <div>
      <div className='e-btn-group'>
        <ButtonComponent cssClass='e-info'>View</ButtonComponent>
        <ButtonComponent>Edit</ButtonComponent>
        <ButtonComponent cssClass='e-danger'>Delete</ButtonComponent>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));

Predefined styles provide visual indication only. Always ensure button labels clearly describe the action for screen reader users.

Chip Accessibility

Table of Contents

• Standards Compliance
• WAI-ARIA Attributes
• Keyboard Interaction
• Screen Reader Support
• RTL Support
• Color Contrast
• Ensuring Accessibility

---

Standards Compliance

The Syncfusion React Chips component is built to meet industry accessibility standards:

---

WAI-ARIA Attributes

The Chips component follows WAI-ARIA patterns. The following ARIA attributes are automatically applied:

Example: Providing Custom aria-label

Use htmlAttributes to provide an explicit accessible name:

import {
  ChipListComponent,
  ChipsDirective,
  ChipDirective
} from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {
  return (
    <ChipListComponent
      id="accessible-chips"
      selection="Multiple"
      htmlAttributes={{ 'aria-label': 'Filter by category' }}
    >
      <ChipsDirective>
        <ChipDirective text="React" htmlAttributes={{ 'aria-label': 'React framework' }} />
        <ChipDirective text="Angular" htmlAttributes={{ 'aria-label': 'Angular framework' }} />
        <ChipDirective text="Vue" htmlAttributes={{ 'aria-label': 'Vue framework' }} />
      </ChipsDirective>
    </ChipListComponent>
  );
}
export default App;

---

Keyboard Interaction

The Chips component supports full keyboard navigation following WAI-ARIA keyboard interaction guidelines:

Example: Keyboard-Accessible Deletable Chip List

import {
  ChipListComponent,
  ChipsDirective,
  ChipDirective
} from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {
  return (
    <ChipListComponent
      id="keyboard-chips"
      enableDelete={true}
      selection="Multiple"
    >
      <ChipsDirective>
        <ChipDirective text="JavaScript" />
        <ChipDirective text="TypeScript" />
        <ChipDirective text="Python" />
        <ChipDirective text="Rust" />
      </ChipsDirective>
    </ChipListComponent>
  );
}
export default App;

• Keyboard users can navigate chips with arrow keys, select with Enter/Space, and delete with Delete/Backspace.

---

Screen Reader Support

The Chips component works with popular screen readers (NVDA, JAWS, VoiceOver) because:

• The container is marked as role="listbox".
• Each chip has role="option" or role="button" depending on context.
• aria-selected is updated dynamically when a chip is selected.
• aria-disabled is set for disabled chips.
• The created event fires when the component is fully initialized.

Best Practice: Descriptive Labels

Use htmlAttributes to add aria-label to chips that don't have self-describing text:

<ChipDirective
  avatarText="A"
  text="Andrew"
  htmlAttributes={{ 'aria-label': 'Andrew, team member' }}
/>

---

RTL Support

Enable right-to-left rendering for Arabic, Hebrew, and other RTL languages:

import {
  ChipListComponent,
  ChipsDirective,
  ChipDirective
} from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {
  return (
    <ChipListComponent id="rtl-chips" enableRtl={true}>
      <ChipsDirective>
        <ChipDirective text="مرحبا" />
        <ChipDirective text="العالم" />
        <ChipDirective text="React" />
      </ChipsDirective>
    </ChipListComponent>
  );
}
export default App;

• enableRtl={true} — flips the chip layout, icon positions, and text direction.

---

Color Contrast

The Syncfusion themes (Material, Tailwind, Bootstrap, Fluent) are designed to meet WCAG 2.2 color contrast requirements (minimum 4.5:1 ratio for normal text).

When customizing chip colors via CSS, verify contrast ratios using tools such as:

• WebAIM Contrast Checker
• Colour Contrast Analyser

Example of accessible custom selection color:

/* Ensure sufficient contrast on selected chip */
.e-chip-list.e-selection .e-chip.e-active {
  background-color: #1a56db; /* dark blue */
  color: #ffffff;             /* white text — passes AA */
}

---

Ensuring Accessibility

The component's accessibility is validated using:

• accessibility-checker
• axe-core

To validate your implementation:

# Run axe-core in your test suite
npm install axe-core --save-dev

import axe from 'axe-core';

axe.run(document.getElementById('chip-list')).then((results) => {
  if (results.violations.length) {
    console.error('Accessibility violations:', results.violations);
  }
});

You can also open the Syncfusion Chips accessibility sample to evaluate live compliance with accessibility tools.

ChipListComponent API Reference

Table of Contents

• Import
• Properties
• Methods
• Events
• ChipModel Interface
• Event Argument Types

---

Import

import {
  ChipListComponent,
  ChipsDirective,
  ChipDirective
} from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

---

Properties

text — string

Specifies the text content for a single chip.

• Default: ''
• Use when: Rendering a single ChipListComponent without ChipsDirective.

<ChipListComponent text="Janet Leverling" />

---

chips — string[] | number[] | ChipModel[]

Provides chip data programmatically as an array. Alternative to using ChipsDirective.

• Default: []

const chipsData = [
  { text: 'React', cssClass: 'e-primary' },
  { text: 'Angular', cssClass: 'e-success' }
];
<ChipListComponent chips={chipsData} />

---

selection — 'None' | 'Single' | 'Multiple'

Defines the selection behavior of the chip list.

• Default: 'None'
• 'None' — No selection (use for action chips)
• 'Single' — One chip selected at a time (choice chips)
• 'Multiple' — Multiple chips can be selected (filter chips)

<ChipListComponent selection="Multiple">...</ChipListComponent>

---

selectedChips — string[] | number[] | number

Pre-selects chips by index or text value.

• Default: []
• Requires selection to be 'Single' or 'Multiple' to be visible.

<ChipListComponent selection="Multiple" selectedChips={[0, 2]}>...</ChipListComponent>

---

enableDelete — boolean

Shows a delete (×) icon on each chip, allowing removal.

• Default: false

<ChipListComponent enableDelete={true}>...</ChipListComponent>

---

cssClass — string

Applies custom CSS class(es) to the chip list or individual chip elements.

• Default: ''
• Common values: 'e-outline', 'e-primary', 'e-success', 'e-info', 'e-warning', 'e-danger'

<ChipListComponent cssClass="e-outline">...</ChipListComponent>

---

enabled — boolean

Enables or disables the entire chip list.

• Default: true
• When false, chips are visible but not interactive; aria-disabled="true" is applied.

<ChipListComponent enabled={false}>...</ChipListComponent>

---

allowDragAndDrop — boolean

Enables drag-and-drop reordering of chips within or across containers.

• Default: false

<ChipListComponent allowDragAndDrop={true}>...</ChipListComponent>

---

dragArea — HTMLElement | string

Restricts the draggable chip's movement to a specific container. Accepts a CSS selector string or an HTMLElement.

• Default: null (no restriction — full page)

<ChipListComponent allowDragAndDrop={true} dragArea="#my-container">...</ChipListComponent>

---

leadingIconCss — string

Specifies the CSS class for the leading (left) icon on a single chip.

• Default: ''

<ChipListComponent text="Janet" leadingIconCss="janet-icon" />

---

leadingIconUrl — string

Specifies a direct image URL for the leading icon.

• Default: ''

<ChipDirective text="Profile" leadingIconUrl="https://example.com/avatar.png" />

---

avatarIconCss — string

Specifies the CSS class for the avatar image in the chip.

• Default: ''

<ChipListComponent text="Andrew" avatarIconCss="andrew-avatar" />

---

avatarText — string

Specifies text displayed inside the chip's circular avatar area (e.g., initials).

• Default: ''

<ChipDirective text="Andrew" avatarText="A" />

---

trailingIconCss — string

Specifies the CSS class for the trailing (right) icon on a chip.

• Default: ''

<ChipDirective text="Remove" trailingIconCss="e-dlt-btn" />

---

trailingIconUrl — string

Specifies a direct image URL for the trailing icon.

• Default: ''

<ChipDirective text="Download" trailingIconUrl="https://example.com/icons/download.svg" />

---

htmlAttributes — { [key: string]: string }

Passes additional HTML attributes (aria, data-*, title, etc.) to the chip element.

• Default: {}

<ChipListComponent htmlAttributes={{ 'aria-label': 'Tag list', 'data-testid': 'chip-list' }}>
  ...
</ChipListComponent>

---

enableRtl — boolean

Renders the component in right-to-left direction.

• Default: false

<ChipListComponent enableRtl={true}>...</ChipListComponent>

---

enablePersistence — boolean

Persists the component's state (e.g., selection) across page reloads using browser local storage.

• Default: false

<ChipListComponent enablePersistence={true} selection="Multiple">...</ChipListComponent>

---

locale — string

Overrides the global culture/localization for this component.

• Default: '' (uses global 'en-US')

---

Methods

Access methods via a React ref:

const chipRef = React.useRef<ChipListComponent>(null);
<ChipListComponent ref={chipRef}>...</ChipListComponent>

---

add(chipsData) → void

Adds chip(s) to the list programmatically.

• Parameter: string | number | ChipModel | string[] | number[] | ChipModel[]

// Add a single chip by text
chipRef.current?.add('New Tag');

// Add multiple chips
chipRef.current?.add(['Tag A', 'Tag B']);

// Add with model
chipRef.current?.add({ text: 'React', cssClass: 'e-primary' });

---

remove(fields) → void

Removes chip(s) by index or DOM element reference.

• Parameter: number | number[] | HTMLElement | HTMLElement[]

// Remove chip at index 0
chipRef.current?.remove([0]);

// Remove by DOM element
const el = document.querySelector('.my-chip') as HTMLElement;
chipRef.current?.remove(el);

---

find(fields) → ChipDataArgs

Finds a chip by index or DOM element and returns its data.

• Parameter: number | HTMLElement
• Returns: ChipDataArgs — contains chip data (text, element, etc.)

const chipData = chipRef.current?.find(2);
console.log(chipData?.text); // logs text of chip at index 2

---

getSelectedChips() → SelectedItem | SelectedItems | undefined

Returns the currently selected chip(s) data.

• Returns SelectedItem for single selection, SelectedItems for multiple.

const selected = chipRef.current?.getSelectedChips();
console.log(selected);

---

select(fields) → void

Programmatically selects chip(s) by index, text, or DOM element.

// Select chip at index 1
chipRef.current?.select(1);

---

destroy() → void

Removes the component from the DOM and detaches all event handlers.

chipRef.current?.destroy();

---

Events

onClick — EmitType<ClickEventArgs>

Fires when a chip is clicked.

<ChipListComponent onClick={(e) => console.log('Clicked:', e.target.textContent)}>

---

beforeClick — EmitType<ClickEventArgs>

Fires before the click event is processed. Set e.cancel = true to prevent the click.

<ChipListComponent beforeClick={(e) => { if (e.text === 'Locked') e.cancel = true; }}>

---

created — EmitType<Event>

Fires when the component is created and rendered successfully.

<ChipListComponent created={() => console.log('Chips ready')}>

---

delete — EmitType<DeleteEventArgs>

Fires before a chip is removed. Set e.cancel = true to prevent deletion.

<ChipListComponent
  enableDelete={true}
  delete={(e) => { if (e.text === 'Protected') e.cancel = true; }}
>

---

deleted — EmitType<ChipDeletedEventArgs>

Fires after a chip has been removed.

<ChipListComponent enableDelete={true} deleted={(e) => console.log('Removed:', e.text)}>

---

dragStart — EmitType<DragAndDropEventArgs>

Fires when a chip starts being dragged. Set args.cancel = true to prevent dragging.

<ChipListComponent
  allowDragAndDrop={true}
  dragStart={(args) => console.log('Drag started')}
>

---

dragging — EmitType<DragAndDropEventArgs>

Fires continuously while a chip is being dragged. Use to customize the drag clone.

<ChipListComponent
  allowDragAndDrop={true}
  dragging={(args) => { /* customize args.clonedElement */ }}
>

---

dragStop — EmitType<DragAndDropEventArgs>

Fires when a drag operation ends. Set args.cancel = true to prevent the drop.

<ChipListComponent
  allowDragAndDrop={true}
  dragStop={(args) => console.log('Drag stopped')}
>

---

ChipModel Interface

When using the chips prop or add() method with object data, each item follows the ChipModel shape:

const chips: ChipModel[] = [
  { text: 'React', cssClass: 'e-primary', avatarText: 'R', enabled: true },
  { text: 'Angular', cssClass: 'e-success', avatarText: 'A', enabled: true },
  { text: 'Vue', cssClass: 'e-info', avatarText: 'V', enabled: false }
];

<ChipListComponent chips={chips} />

---

Event Argument Types

Accessibility — Syncfusion React DropDownButton

Compliance Summary

---

WAI-ARIA Attributes

The DropDownButton component automatically manages the following ARIA attributes:

No manual ARIA wiring is required — the component handles these automatically.

---

Keyboard Interaction

---

RTL Support

Enable right-to-left layout for RTL languages (Arabic, Hebrew, Urdu, etc.):

<DropDownButtonComponent
  items={items}
  iconCss="ddb-icons e-message"
  enableRtl={true}
>
  Message
</DropDownButtonComponent>

---

Disabled State

A disabled button is excluded from the tab order and is not interactive:

<DropDownButtonComponent items={items} disabled={true}>
  Unavailable
</DropDownButtonComponent>

The aria-disabled="true" attribute is set automatically.

---

Best Practices

• Provide meaningful button text or an aria-label when using icon-only buttons:

  <DropDownButtonComponent
    items={items}
    iconCss="e-icons e-menu"
    cssClass="e-caret-hide"
    // Add aria-label via the HTML element
    ref={(scope) => {
      if (scope) scope.element.setAttribute('aria-label', 'Open menu');
    }}
  />

• Ensure popup item text is descriptive (avoid "Click here" or "Item 1").
• Use separators and grouping to improve navigation for screen reader users.
• Test with assistive tools: accessibility-checker, axe-core.