@syncfusion/react-buttons

React Buttons Components

What's Included in the React Button Package

The React Button package includes the following list of components.

React Button

The Button component is designed to create highly customizable and interactive button elements with a variety of styling and functional options. It allows for tailored interactions through different configurations such as size, color, icon positioning, and toggle capability.

Explore the demo here.

Key features

• Color Variants: Style buttons with distinct color options like 'warning', 'success', 'danger', and 'info' to fit your application's theme.

• Icon Support: Integrate SVG icons within buttons for enhanced visual cues. Configure the icon's position to be left, right, top, or bottom relative to button text.

• Toggle Functionality: Use the button as a toggle to maintain and represent states within your application, enabling buttons to switch between active and inactive states upon user interaction.

• Size Options: Adjust button dimensions with size variants such as 'small', 'medium' and 'bigger', allowing for flexibility in different UI contexts.

• Variant Styles: Choose from various button styles like 'outlind', 'filled', and 'flat' to seamlessly integrate with your design language.

• Selection Management: Include prop configurations to set initial states, making it simple to handle selection states, especially useful for toggle buttons.

React Checkbox

The Checkbox component offers a flexible and user-friendly way to allow users to make binary selections. It supports various states and configurations to accommodate different use cases in applications.

Explore the demo here.

Key features

• Selection States: The Checkbox component can be configured to be in checked, unchecked, or indeterminate states. This provides a visual cue for users to understand the current selection state.

• Label Support: Display informative text alongside the checkbox to clearly convey its purpose to users. The label can be positioned either before or after the checkbox element based on UI preferences.

• Label Positioning: Configure the label placement with the labelPlacement prop, choosing whether the label appears before or after the Checkbox.

React Chip

The Chip component represents information in a compact form, such as entity attribute, text, or action. It provides a versatile way to display content in a contained, interactive element.

Explore the demo here.

Key features

• Variants: Display chips with different visual styles using either 'filled' or 'outlined' variants to match your design requirements.

• Colors: Customize the appearance with predefined color options including primary, info, danger, success, and warning.

• Icons and Avatars: Enhance visual representation with leading icons, trailing icons, or avatars to provide additional context.

React ChipList

The ChipList component displays a collection of chips that can be used to represent multiple items in a compact form. It provides a flexible way to manage and interact with a group of chip elements.

Explore the demo here.

Key features

• Selection Modes: Supports three selection types - 'single', 'multiple', and 'none' to control how users can select chips.

• Data Binding: Easily populate the ChipList with an array of strings, numbers, or custom chip configurations.

• Customizable Chips: Each chip can be individually styled with avatars, leading icons, trailing icons, and different variants.

• Removable Chips: Configure chips to be removable with built-in delete event handling.

• Controlled & Uncontrolled Modes: Supports both controlled and uncontrolled component patterns for selection and deletion.

React Floating Action Button

The Floating Action Button (FAB) component provides a prominent primary action within an application interface, positioned for high visibility and customizable with various styling options.

Explore the demo here.

Key features

• Color Variants: Customizable color options such as 'warning', 'success', 'danger', and 'info' are available to help the FAB blend seamlessly with your application's color scheme.

• Icon Customization: Integrate SVG icons within buttons for enhanced visual appeal. Control icon placement relative to text with configurable options for positioning.

• Visibility Control: Easily manage the visibility of the FAB using the isVisible prop, deciding if it should be displayed based on application logic.

• Positioning: The FAB can be positioned flexibly with options like top-left, top-right, bottom-left, and bottom-right to fit different design requirements.

• Size Options: Modify the size of the FAB with options for 'small', 'medium' and 'bigger', accommodating different interface contexts.

• Toggle Functionality: Activate toggle behavior for the FAB to allow it to switch states on each user interaction, which can be useful for certain UI scenarios.

React RadioButton

The RadioButton component enables users to select a single option from a group, offering a clear circular interface for making selections. It is a simple and efficient way to present mutually exclusive choices to users.

Explore the demo here.

Key features

• Selection State: Easily configure the RadioButton to be in a checked or unchecked state, indicating selected or unselected options within a group.

• Label Customization: The RadioButton can be accompanied by a text label to describe its function, which helps users understand the purpose of the radio selection.

• Label Positioning: Flexibly position the label relative to the RadioButton with options available for placing it before or after the button, enhancing UI layout consistency.

• Form Integration: The value attribute of the RadioButton can be included as part of form data submitted to the server, facilitating efficient data processing.

Trusted by the world's leading companies

Setup

To install buttons and its dependent packages, use the following command,

npm install @syncfusion/react-buttons

Support

Product support is available through following mediums.

• Support ticket - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
• Live chat

Changelog

Check the changelog here. Get minor improvements and bug fixes every week to stay up to date with frequent updates.

License and copyright

This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA. To acquire a license for React UI components, you can purchase or start a free 30-day trial.

A free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

See LICENSE FILE for more info.

© Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.