@syncfusion/react-splitbuttons

React Split Button Components

What's Included in the React Split Button Package

The React Split Button package includes the following list of components.

React Split Button

The Split Button component combines a primary button action with a dropdown menu, allowing users to access additional options or actions from a compact interface, enhancing user interaction with contextual commands.

Explore the demo here.

Key features

• Primary and Secondary Actions: The Split Button provides a main action on the button itself, with secondary actions available in a dropdown list, offering ease of use and efficiency in accessing commands.

• Customization Options: Style the Split Button with various color options like 'warning', 'success', 'danger', and 'info', and integrate icons using CSS class names or React components (SVG) to enhance visual appeal.

• Icon Placement: Configure the position of icons relative to button text, with options available for left, right, top, or bottom positioning, ensuring design consistency.

• Popup Management: Control the behavior of the dropdown popup with the isPopupCreatedOnClick prop for performance optimization and manage toggle states efficiently using the toggle prop.

• Template Support: Utilize the itemTemplate prop to customize the dropdown menu items, ensuring a tailored user experience that matches application needs.

React Dropdown Button

The Dropdown Button component enhances user interfaces with a menu of actions or options that appears on button click, offering an intuitive dropdown mechanism for users.

Explore the demo here.

Key features

• Color Options: Style the dropdown button using color variants such as 'warning', 'success', 'danger', and 'info' to align with application themes.

• Icon Customization: Integrate icons within the dropdown button using CSS classes or React components (SVG). Adjust icon placement relative to button text with options for left, right, top, or bottom positioning.

• Interactive Elements: Configure the dropdown content using the itemTemplate prop for advanced functionality within dropdown items. Define action items and their properties for a seamless user interaction experience.

• Responsive Design: Adapt the dropdown button with size options — 'small' and 'large' — to fit different UI scenarios.

• Popup Control: The isPopupCreatedOnClick prop controls the dynamic creation of the popup for enhanced performance. Manage the button's open/close states with the toggle prop for precise control over user interactions.

Trusted by the world's leading companies

Setup

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

npm install @syncfusion/react-splitbuttons

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.