Syncfusion React Buttons

Syncfusion React Buttons

📌 Agent Notice: 📄 Read: links in Navigation Guide sections are reference pointers for passive file reading only. They do not imply automatic tool invocation, command execution, or action chaining.

Button

The Syncfusion ButtonComponent is a graphical user interface element that triggers an action on click. It supports text, icons, or both, with extensive styling, accessibility, and behavioral options.

Navigation Guide

Getting Started

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

• Installation and package setup
• CSS imports and theme configuration
• Rendering the first ButtonComponent
• Enabling ripple effects
• Basic click handling

Types and Styles

📄 Read: references/button-types-and-styles.md

• Predefined color styles (primary, success, info, warning, danger, link)
• Flat, outline, round, and toggle button types
• Basic HTML button types (submit, reset)
• Icon buttons (font icons, SVG)
• Icon positioning (left/right)
• Button sizes (small, normal)

How-To Patterns

📄 Read: references/button-how-to.md

• Create a block (full-width) button
• Create a rounded-corner button
• Add a navigation link to a button
• Customize button appearance with CSS
• Style native input and anchor elements as buttons
• Set the disabled state
• Enable right-to-left (RTL) support
• Add a tooltip on hover
• Implement a repeat button

Style and Appearance

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

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

Accessibility

📄 Read: references/button-accessibility.md

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

API Reference

📄 Read: references/button-api.md

• All properties, methods, and events
• Property types, defaults, and constraints

Quick Start

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

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

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

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

enableRipple(true);

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

Common Patterns

Styled Button

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

Icon Button

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

Toggle Button

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

Disabled Button

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

Block (Full-Width) Button

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

ButtonGroup

The ButtonGroup is a pure CSS component that groups a series of buttons together in a horizontal (default) or vertical layout. It supports normal button behavior as well as radio-type (single selection) and checkbox-type (multiple selection) behaviors. Buttons can be nested with DropDownButton and SplitButton components.

Navigation Guide

Getting Started

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

• Installation and package setup
• Adding CSS references and theme imports
• Basic ButtonGroup implementation
• Running the application

Types and Styles

📄 Read: references/buttongroup-types-and-styles.md

• Outline ButtonGroup (e-outline)
• Predefined color styles (e-primary, e-success, e-info, e-warning, e-danger)
• Mixing styles within a group

Selection and Nesting

📄 Read: references/buttongroup-selection-and-nesting.md

• Single selection (radio type)
• Multiple selection (checkbox type)
• Setting initial selected state
• Nesting DropDownButton inside ButtonGroup
• Nesting SplitButton inside ButtonGroup

How-To Guide

📄 Read: references/buttongroup-how-to.md

• Add icons to buttons (iconCss)
• Rounded corners (e-round-corner)
• Disable individual or all buttons
• Enable ripple effect
• Enable RTL support
• Vertical orientation (e-vertical)
• Form submit with radio/checkbox ButtonGroup
• Initialize using createButtonGroup utility function

Style and Appearance

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

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

Accessibility

📄 Read: references/buttongroup-accessibility.md

• WCAG 2.2, Section 508 compliance
• Keyboard navigation shortcuts
• Screen reader support

Quick Start

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

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

Required CSS imports in src/App.css:

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

Common Patterns

Radio (single-select) ButtonGroup

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

Checkbox (multi-select) ButtonGroup

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

Vertical ButtonGroup

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

Key Props