@syncfusion/react-splitbuttons/README.md

Syncfusion React SplitButton package is a feature-rich collection of UI components, including SplitButton and DropDownButton, designed for advanced button interactions in React applications.

# React Split Button Components

The Syncfusion React SplitButton package is a feature-rich collection of UI components, including SplitButton and DropDownButton, designed for advanced button interactions in React applications.

## Setup

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

```sh
npm install @syncfusion/react-splitbuttons
```

## 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.

**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.

**Usage**

```tsx
import { SplitButton } from "@syncfusion/react-splitbuttons";

export default function App() {
    const menuItems = [{ text: 'Cut' }, { text: 'Copy' }, { text: 'Paste' }];

    return (
      <SplitButton items={menuItems}>Default Action</SplitButton>
    );  
}
```

**Resources**

- [SplitButton Demo/Docs](https://react.syncfusion.com/react-ui/split-button)
- [SplitButton API](https://react.syncfusion.com/api/split-button/overview)

## 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.

**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.

**Usage**

```tsx
import { DropDownButton } from "@syncfusion/react-splitbuttons";

export default function App() {
    const menuItems = [{ text: 'Cut' }, { text: 'Copy' }, { text: 'Paste' }];

    return (
      <DropDownButton items={menuItems}>Default</DropDownButton>
    );  
}
```

**Resources**

- [Dropdown Button Demo/Docs](https://react.syncfusion.com/react-ui/dropdown-button)
- [Dropdown Button API](https://react.syncfusion.com/api/dropdown-button/overview)

<p align="center">
Trusted by the world's leading companies
  <a href="https://www.syncfusion.com/">
    <img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Syncfusion logo">
  </a>
</p>

## Support

Product support is available through following mediums.

* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
* Live chat

## Changelog

Check the changelog [here](https://github.com/syncfusion/react-ui-components/blob/master/components/splitbuttons/CHANGELOG.md). 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](https://www.syncfusion.com/eula/es/). To acquire a license for [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).

> A [free community license](https://www.syncfusion.com/products/communitylicense) 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](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info.

&copy; Copyright 2026 Syncfusion®, Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution.