# Syncfusion 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. Both components combine a compact button surface with a dropdown popup that exposes additional actions or options.

## Setup

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

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

Apply a theme by installing the corresponding theme package and importing its styles, for example with the [Material theme](https://www.npmjs.com/package/@syncfusion/react-material-theme):

```sh
npm install @syncfusion/react-material-theme
```

```css
/* App.css */
@import '../node_modules/@syncfusion/react-material-theme/styles/split-button/index.css';
```

> Note: For other themes, use the corresponding `index.css` files from their respective style folders.

## React Split Button

The Split Button component combines a default button action with a dropdown menu, enabling users to access additional options or actions from a compact interface.

### Key Features

- **[Variants:](https://react.syncfusion.com/react-ui/split-button/#variants)** Style the SplitButton using the `variant` prop with the options `Variant.Standard`, `Variant.Outlined`, and `Variant.Filled` to match different surface treatments in your application.

- **Color:** Apply a color style to the SplitButton using the `color` prop. The available options are `Color.Primary`, `Color.Secondary`, `Color.Warning`, `Color.Success`, `Color.Error`, and `Color.Info`.

- **[Size:](https://react.syncfusion.com/react-ui/split-button/#size)** Adjust the visual scale of the SplitButton with the `size` prop, which accepts `Size.Small`, `Size.Medium`, and `Size.Large`.

- **[Icons:](https://react.syncfusion.com/react-ui/split-button/#icons)** Add an icon to the button using the `icon` prop, defined as a CSS class name or an SVG React element. Control placement relative to the button text with the `iconPosition` prop, supporting `Left`, `Right`, `Top`, and `Bottom`.

- **[Customization:](https://react.syncfusion.com/react-ui/split-button/#customization)** Customize the dropdown by adding icons and separators to items, turning items into links, or applying a custom design with the `itemTemplate` prop. Manage additional properties on the trailing dropdown button with the `trailingButtonProps` prop.

- **Popup Management:** Create the popup only on demand with the `lazyOpen` prop to optimize performance, and configure position, offset, collision handling, and animation through the `popupSettings` prop. Use the `toggle` method to open or close the popup based on its current state.

**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</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 is an interactive button that reveals a menu of actions or options when clicked, providing a dropdown interface for intuitive user interaction.

### Key Features

- **[Color:](https://react.syncfusion.com/react-ui/dropdown-button/#color)** Style the DropDownButton using the `color` prop with the options `Color.Primary`, `Color.Secondary`, `Color.Warning`, `Color.Success`, `Color.Error`, and `Color.Info` to indicate different alert levels.

- **[Size:](https://react.syncfusion.com/react-ui/dropdown-button/#size)** Adjust the visual scale of the DropDownButton with the `size` prop, which accepts `Size.Small`, `Size.Medium`, and `Size.Large`.

- **[Icons:]** Add an icon to the button using the `icon` prop, defined as a CSS class name or an SVG React element. Control placement relative to the button text with the `iconPosition` prop, supporting `Left`, `Right`, `Top`, and `Bottom`.

- **[Template:](https://react.syncfusion.com/react-ui/dropdown-button/#icons)** Use the `itemTemplate` prop to define a custom template for the dropdown items, customizing the appearance and layout beyond the default options.

- **Popup Management:** Create the popup only on click with the `lazyOpen` prop to optimize performance, and configure position, offset, collision handling, and animation through the `popupSettings` prop. Use the `toggle` method to open or close the popup based on its current state.

**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="Company 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.