Split Button Component

The Split Button component provides a combination of a default button action and a Dropdown Button, enabling users to quickly access additional options or actions in a compact interface.

Usage

To import and use the Split Button component in your application, use the following code snippet:

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

const menuItems = [{ text: 'Cut' }, { text: 'Copy' }, { text: 'Paste' }];
<SplitButton items={menuItems}>Default Action</SplitButton>

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

const menuItems = [{ text: 'Cut' }, { text: 'Copy' }, { text: 'Paste' }];
<SplitButton items={menuItems}>Default Action</SplitButton>

Demos

Explore the demos of the React Split Button component. Refer to this page.

Props

The following table outlines the props for the Split Button component:

Name	Type	Default	Description
color	Color	Color.Primary	Specifies the color style of the Split Button. Options include 'Primary', 'Secondary', 'Warning', 'Success', 'Error' and 'Info'.
icon	node	-	Specifies an icon for the button, which can be defined using a CSS class name for custom styling or an SVG element for rendering.
iconPosition	Position	'Left'	Specifies the position of the icon relative to the Dropdown Button text. Options include placing the icon at the left, right, top, or bottom of the button content.
itemTemplate	(item: ItemModel) => node	-	Provides a template for displaying content within the dropdown items.
items	ItemModel[]	[ ]	Specifies action items with its properties which will be rendered as Split Button secondary button popup.
lazyOpen	boolean	false	Specifies the popup element creation on open.
popupWidth	string \| number	auto	This property defines the width of the dropdown popup for the Dropdown Button component. Set the width as a string or number using valid CSS units like `px`, `%`, or `rem`, or as pixels. The default value of `auto` allows the popup to adjust based on the content length, but a specific width can be provided for more precise control.
size	Size	Size.Medium	Specifies the size style of the Split Button. Options include 'Small', 'Medium' and 'Large'.
target	React.RefObject<HTMLElement>	-	Specifies the target element for the Dropdown Button's popup content.
variant	Variant	Variant.Filled	Specifies the variant style of the Split Button. Options include 'Outlined', 'Filled' and 'Standard'.

Methods

The following table outlines the methods for the Split Button component:

Name	Parameters	Returns	Description
toggle	-	void	To open/close Split Button popup based on current state of the Split Button.

Events

The following table outlines the events for the Split Button component:

Name	Type	Description
onClose	(event?: React.MouseEvent) => void	Event triggered while closing the Split Button popup.
onOpen	(event?: React.MouseEvent) => void	Event triggered while opening the Split Button popup.
onSelect	(event: ButtonSelectEvent) => void	Event triggered while selecting an action item in Split Button popup.