React Split Button – Interactive Button with Dropdown Options

Overview

The React Split Button is a versatile UI component that performs a default action when its main button is clicked, while offering a dropdown list of additional actions. It includes built-in support for icon integration and positioning, multiple size options, item disabling, separators, right-to-left (RTL) layouts, and extensive UI customization.

React Split Button code example

Get started with the React Split Button component using a few simple lines of TSX code, as demonstrated below. Explore this React Split Button example to see how to render and configure the Split Button component in React.

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

export default function App() {
    const items = [
        { text: 'My Profile' },
        { text: 'Friend Requests' },
        { text: 'Account Settings' },
        { text: 'Support' },
        { text: 'Log Out' }
      ];
  return (
    <div className='splitbutton-section'>
        <SplitButton items={items} >Default</SplitButton>
    </div>
  );
}

Menu items with icons

Visual elements are often more effective than text in capturing user attention. The React Split Button supports built-in options to include icons positioned to the left or above the label, or to display an icon-only button for a more compact and intuitive design.

Web accessibility

• Fully supports WAI-ARIA accessibility to work with screen readers and assistive devices.
• Follows WAI-ARIA best practices for implementing keyboard interaction.
• Follows WCAG 2.0 standards in the design of the UI visual elements, such as foreground color, background color, line spacing, text, and images.
• Supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian.

Developer-friendly APIs

The Split Button offers control over all of its UI elements and their behaviors through a rich set of developer-friendly APIs, allowing you to provide the best user experience.

• Split Button API reference