syncfusion-react-buttons

What this skill does

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