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.

bash

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

tsx

// 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

tsx

<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

tsx

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

Toggle Button

tsx

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

Disabled Button

tsx

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

Block (Full-Width) Button

tsx

<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

tsx

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

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

tsx

<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

tsx

<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

tsx

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

Key Props

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

DropDownButton

The Syncfusion

DropDownButtonComponent

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

Navigation Guide

Getting Started

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

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

Popup Items and Navigation

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

Adding icons to popup items with
```
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

tsx

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

tsx

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

tsx

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

tsx

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.

bash

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

css

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

tsx

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)

tsx

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

tsx

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

tsx

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

Prop	Type	Default	Purpose
`iconCss`	`string`	`''`	CSS class for the FAB icon
`content`	`string`	`''`	Text label displayed on/beside the FAB
`iconPosition`	`'Left' \| 'Right'`	`'Left'`	Icon placement relative to text
`position`	`FabPosition`	`'BottomRight'`	Predefined position within target/viewport
`target`	`string \| HTMLElement`	`''`	Container element selector for FAB scoping
`cssClass`	`string`	`''`	Custom CSS class(es) for styling
`disabled`	`boolean`	`false`	Disables the FAB
`visible`	`boolean`	`true`	Shows or hides the FAB
`isPrimary`	`boolean`	`true`	Applies primary styling
`enableRtl`	`boolean`	`false`	Right-to-left rendering
`enableHtmlSanitizer`	`boolean`	`true`	Sanitizes HTML in `content`

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.

bash

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

css

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

tsx

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

tsx

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

tsx

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

tsx

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

tsx

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

Programmatic open/close

tsx

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

Task	Read
Install package and first render	`references/getting-started.md`
Spinner position/size/template + progress bar + animations + step/percent/start/stop	`references/spinner-and-progress.md`
CSS classes, theming, Theme Studio	`references/style-and-appearance.md`
ARIA attributes, keyboard shortcuts, screen-reader compliance	`references/accessibility.md`
Enable the background progress fill	`references/how-to-enable-progress-in-button.md`
Hide the spinner (show only progress bar)	`references/how-to-hide-spinner.md`
Vertical, top, or reverse progress fill	`references/how-to-customize-progress-using-cssclass.md`
Change button text / CSS class while progress runs	`references/how-to-change-text-content-and-styles-of-the-progressbutton-during-progress.md`
Trace / handle lifecycle events	`references/how-to-trace-events-of-progress-button.md`
Full API reference (all props, events, methods, types)	`references/api.md`

Quick Start

bash

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

tsx

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

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

css

/* 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

tsx

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

Custom spinner (right, small, templated)

tsx

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

tsx

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

tsx

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

tsx

<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

File	Contents
`references/getting-started.md`	Installation, CSS imports, first component
`references/spinner-and-progress.md`	Spinner config, animation, step, dynamic %, start/stop
`references/style-and-appearance.md`	CSS class table, theming
`references/accessibility.md`	ARIA, keyboard nav, compliance matrix
`references/how-to-enable-progress-in-button.md`	`enableProgress` how-to
`references/how-to-hide-spinner.md`	`e-hide-spinner` how-to
`references/how-to-customize-progress-using-cssclass.md`	Vertical / top / reverse fill
`references/how-to-change-text-content-and-styles-of-the-progressbutton-during-progress.md`	Dynamic text/style during progress
`references/how-to-trace-events-of-progress-button.md`	Event tracing example
`references/api.md`	Full API: props, events, methods, types

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

tsx

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:

bash

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

Common Patterns

Switch with ON/OFF text labels

tsx

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

Note: Text labels are not supported in Material themes.

Handle state changes

tsx

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

tsx

<SwitchComponent disabled={true} />

Small size switch

tsx

<SwitchComponent cssClass="e-small" />

Programmatic toggle

tsx

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

tsx

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

Key Props at a Glance

Prop	Type	Default	Purpose
`checked`	boolean	false	Initial checked state
`disabled`	boolean	false	Disables user interaction
`cssClass`	string	''	Custom CSS class (use `e-small` for small size)
`onLabel`	string	''	Label when checked
`offLabel`	string	''	Label when unchecked
`name`	string	''	Form field name
`value`	string	''	Form field value
`enableRtl`	boolean	false	Right-to-left layout
`enablePersistence`	boolean	false	Persist state on reload

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

tsx

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

tsx

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

tsx

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

tsx

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

tsx

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

tsx

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

tsx

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

Share Pattern

tsx

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

tsx

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

Property	Type	Default	Purpose
`items`	`ItemModel[]`	`[]`	Dropdown menu items
`cssClass`	`string`	`''`	CSS classes for styling
`iconCss`	`string`	`''`	Icon CSS for primary button
`iconPosition`	`string`	`'Left'`	Icon position (Left, Right, Top, Bottom)
`disabled`	`boolean`	`false`	Disable the button
`enableRtl`	`boolean`	`false`	Enable RTL mode
`created`	`function`	-	Event on component creation
`click`	`function`	-	Primary button click handler
`select`	`function`	-	Menu item selection handler
`beforeOpen`	`function`	-	Before dropdown opens
`beforeClose`	`function`	-	Before dropdown closes
`open`	`function`	-	After dropdown opens
`close`	`function`	-	After dropdown closes

Next Steps

Installation & Setup → Read getting-started.md
Styling Options → Read types-and-styles.md
Features → Read splitbutton-features.md
Complete API → Read api-reference.md
Advanced Customization → Read customization.md
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

Implementing Syncfusion React 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

tsx

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

tsx

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

tsx

<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

tsx

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

Small compact size

tsx

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

RTL support

tsx

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

Key Props Summary

Prop	Type	Default	Purpose
`label`	string	`''`	Caption displayed next to the button
`name`	string	`''`	Groups buttons as mutually exclusive
`value`	string	`''`	Form value submitted when checked
`checked`	boolean	`false`	Sets checked state
`disabled`	boolean	`false`	Prevents user interaction
`labelPosition`	`'Before'` \| `'After'`	`'After'`	Label placement
`cssClass`	string	`''`	Custom CSS class(es)
`enableRtl`	boolean	`false`	Right-to-left layout
`enablePersistence`	boolean	`false`	Persists state across page reloads

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)

syncfusion-react-buttons

NPX Install

Tags

SKILL.md Content

Syncfusion React Buttons

Button

Navigation Guide

Getting Started

Types and Styles

How-To Patterns

Style and Appearance

Accessibility

API Reference

Quick Start

Common Patterns

Styled Button

Icon Button

Toggle Button

Disabled Button

Block (Full-Width) Button

ButtonGroup

Navigation Guide

Getting Started

Types and Styles

Selection and Nesting

How-To Guide

Style and Appearance

Accessibility

Quick Start

Common Patterns

Radio (single-select) ButtonGroup

Checkbox (multi-select) ButtonGroup

Vertical ButtonGroup

Key Props

DropDownButton

Navigation Guide

Getting Started

Popup Items and Navigation

Icons and Layout

Appearance and Styling

Events and Interactivity

Item Template

ListView Integration

Accessibility

API Reference

Quick Start

Common Patterns

Button with icon and popup icons

Grouped items with separator

Handling item selection

Floating Action Button

Navigation Guide

Getting Started

Icons and Content

Positions

Styles and Appearance

Events

Accessibility

API Reference

Quick Start

Common Patterns

Icon-Only FAB (most common)

FAB with Click Handler

FAB with Custom Style

Key Props at a Glance

Speed Dial

Navigation Guide

Getting Started

Items Configuration

Display Modes

Radial Menu

Positions and Visibility Control

Styles and Appearance

Templates

Events

Modal

Accessibility

API Reference

Quick Start

Common Patterns