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`