React Split Button

The React Split Button is a graphical user interface component that displays Split Button with visual severity levels. It differentiates Buttons with icons and colors to denote the importance and context of the Button. It has several built-in features, such as severities, variants, icons, and a template.

Getting started

To create a new Vite project, refer to the Vite documentation. Once that Vite project is ready to run with default settings, let’s add the React Split Button component to the project.

Adding Syncfusion® packages

To use the Split Button component, install the @syncfusion/react-splitbuttons package:

npm install @syncfusion/react-splitbuttons

Adding CSS Reference

Import the Split Button component’s required CSS references as follows in src/App.css.

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-buttons/styles/material.css';
@import '../node_modules/@syncfusion/react-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/react-popups/styles/material.css';

Adding Split Button component

To include the Split Button component in your application, import the Split Button from @syncfusion/react-splitbuttons package in App.tsx.

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

Add the Split Button component in application as shown in below code example.

import { Variant } from '@syncfusion/react-buttons';
import { SplitButton } from '@syncfusion/react-splitbuttons';
import './App.css';

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>
    <SplitButton items={items} variant={Variant.Outlined}>Outline</SplitButton>
    <SplitButton items={items} variant={Variant.Flat}>Flat</SplitButton>
</div>
);
}

Run the project

To run the project, use the following command:

npm run dev

This section outlines the functionality of Split Button, comparing them to Split Button as essential UI components for selecting options in forms and settings menus.

Disabled

The disabled section shows how the Split Button behaves or can be set up when it shouldn't be interactive, demonstrating different states within the interface.

Icons

This part explores the capability to include icons within the Split Button, adding a layer of visual communication to the component to better signal its purpose or function.

Variants

The Split Button component has three distinct variants : standard, outlined and filled.

Size

Easily customize the Split Button's size to match your design requirements using its built-in sizing properties.

Customization

Customize the Split Button by adding icons and separators, turning items into links, or applying a custom design to the dropdown menu.

Accessibility

The Split Button component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the Split Button component is outlined below.

- All features of the component meet the requirement.

- Some features of the component do not meet the requirement.

- The component does not meet the requirement.

WAI-ARIA attributes

The Split Button component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Splitbutton component:

Keyboard interaction

The Split Button component followed the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Splitbutton component.