# Syncfusion React Buttons

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

- Skill: `syncfusion/syncfusion-react-buttons` (Agent Skill, multi-file: 75 files)
- Install (CLI): `npx skillmds add syncfusion/syncfusion-react-buttons`
- Raw SKILL.md: https://api.skillmd.com/api/skills/syncfusion/syncfusion-react-buttons/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: syncfusion (https://skillmd.com/u/syncfusion)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/syncfusion/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](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](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](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](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](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](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](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](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](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](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](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](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](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](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](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](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](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](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](references/dropdownbutton-listview-integration.md)
- Using `target` property with a ListView element
- Grouped popup items with category headers

#### Accessibility
📄 **Read:** [references/dropdownbutton-accessibility.md](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](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](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](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](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](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](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](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](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](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](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](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](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](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](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](references/speeddial-template.md)
- itemTemplate for custom item rendering
- popupTemplate for full popup customization
- JSX function template pattern

#### Events
📄 **Read:** [references/speeddial-events.md](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](references/speeddial-modal.md)
- Enabling modal overlay
- Interaction blocking behavior
- Close on backdrop click

#### Accessibility
📄 **Read:** [references/speeddial-accessibility.md](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](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`](references/progressbutton-getting-started.md) |
| Spinner position/size/template + progress bar + animations + step/percent/start/stop | [`references/spinner-and-progress.md`](references/progressbutton-spinner-and-progress.md) |
| CSS classes, theming, Theme Studio | [`references/style-and-appearance.md`](references/progressbutton-style-and-appearance.md) |
| ARIA attributes, keyboard shortcuts, screen-reader compliance | [`references/accessibility.md`](references/progressbutton-accessibility.md) |
| Enable the background progress fill | [`references/how-to-enable-progress-in-button.md`](references/progressbutton-how-to-enable-progress-in-button.md) |
| Hide the spinner (show only progress bar) | [`references/how-to-hide-spinner.md`](references/progressbutton-how-to-hide-spinner.md) |
| Vertical, top, or reverse progress fill | [`references/how-to-customize-progress-using-cssclass.md`](references/progressbutton-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`](references/progressbutton-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`](references/progressbutton-how-to-trace-events-of-progress-button.md) |
| Full API reference (all props, events, methods, types) | [`references/api.md`](references/progressbutton-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`](references/progressbutton-getting-started.md) | Installation, CSS imports, first component |
| [`references/spinner-and-progress.md`](references/progressbutton-spinner-and-progress.md) | Spinner config, animation, step, dynamic %, start/stop |
| [`references/style-and-appearance.md`](references/progressbutton-style-and-appearance.md) | CSS class table, theming |
| [`references/accessibility.md`](references/progressbutton-accessibility.md) | ARIA, keyboard nav, compliance matrix |
| [`references/how-to-enable-progress-in-button.md`](references/progressbutton-how-to-enable-progress-in-button.md) | `enableProgress` how-to |
| [`references/how-to-hide-spinner.md`](references/progressbutton-how-to-hide-spinner.md) | `e-hide-spinner` how-to |
| [`references/how-to-customize-progress-using-cssclass.md`](references/progressbutton-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`](references/progressbutton-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`](references/progressbutton-how-to-trace-events-of-progress-button.md) | Event tracing example |
| [`references/api.md`](references/progressbutton-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](references/switch-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](references/switch-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](references/switch-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](references/switch-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](references/switch-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](references/switch-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](references/splitbutton-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](references/splitbutton-types-and-styles.md)
- Button styles (primary, success, info, warning, danger, link)
- Button types (flat, outline, round)
- Icon positioning (left, right, top, bottom)
- Size variations (small, medium, large)
- Styled anchor elements
- RTL support

#### SplitButton Features
📄 **Read:** [references/splitbutton-features.md](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](references/splitbutton-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](references/splitbutton-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](references/splitbutton-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 DynamicI

…(truncated)