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 [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

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

Accessibility

📄 Read: references/button-accessibility.md [blocked]

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

API Reference

📄 Read: references/button-api.md [blocked]

• 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 terminalnpm 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 [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

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

Accessibility

📄 Read: references/buttongroup-accessibility.md [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

• itemTemplate property for custom item rendering
• Rendering links, icons, and rich content inside items

ListView Integration

📄 Read: references/dropdownbutton-listview-integration.md [blocked]

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

Accessibility

📄 Read: references/dropdownbutton-accessibility.md [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

• onClick event for click handling
• created event for post-render initialization

Accessibility

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

• 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 [blocked]

• 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 terminalnpm 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 [blocked]

• 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 [blocked]

• 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 [blocked]

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

Radial Menu

📄 Read: references/speeddial-radial-menu.md [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

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

Events

📄 Read: references/speeddial-events.md [blocked]

• 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 [blocked]

• Enabling modal overlay
• Interaction blocking behavior
• Close on backdrop click

Accessibility

📄 Read: references/speeddial-accessibility.md [blocked]

• 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 [blocked]

• 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 terminalnpm 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.tsximport { 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 [blocked]

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

Features and Configuration

📄 Read: references/features.md [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

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

API Reference

📄 Read: references/api.md [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

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

Customization

📄 Read: references/customization.md [blocked]

• 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 [blocked]

• 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 [blocked]
2. Styling Options → Read types-and-styles.md [blocked]
3. Features → Read splitbutton-features.md [blocked]
4. Complete API → Read api-reference.md [blocked]
5. Advanced Customization → Read customization.md [blocked]
6. Accessibility → Read accessibility.md [blocked]

Troubleshooting Quick Links

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

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 [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 [blocked]

• 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 chipchipRef.current?.add('New Tag');
// Remove chip at index 0chipRef.current?.remove([0]);
// Get selectedconst selected = chipRef.current?.getSelectedChips();