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 selectio

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. Common Patterns Styled Button Icon Button Toggle Button Disabled Button Block (Full Width) Button 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 Required CSS imports in src/App.css : Common Patterns Radio (single select) ButtonGroup Checkbox (multi select) ButtonGroup Vertical ButtonGroup 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 Common Patterns Button with icon and popup icons Grouped items with separator Handling item selection 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. Common Patterns Icon Only FAB (most common) FAB with Click Handler FAB with Custom Style 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 FabPositi

syncfusion-react-buttons