React Dropdown Button

The React Dropdown Button is a graphical user interface component that displays Dropdown Buttons 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 Dropdown Button component to the project.

Installing Syncfusion® React packages

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

npm install @syncfusion/react-splitbuttons

Adding CSS reference

Import the Dropdown 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 Dropdown Button component

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

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

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

import { Variant } from '@syncfusion/react-buttons';
import { DropDownButton } from '@syncfusion/react-splitbuttons';
import { UserIcon, EditIcon, FlagsIcon, TrashIcon, FilterIcon } from '@syncfusion/react-icons';
import './App.css';

export default function App() {
    const items = [
    { text: 'Edit', icon: <EditIcon width={16} height={16} />, },
    { text: 'Flagged', icon: <FlagsIcon width={16} height={16} />, },
    { text: 'Remove', icon: <TrashIcon width={16} height={16} />, },
    { text: 'More filters', icon: <FilterIcon width={16} height={16} />, },
    { text: 'Log Out', icon: <UserIcon width={16} height={16} />, }
    ];
    return (
    <div className='dropdown-center' >
        <DropDownButton items={items} >Default</DropDownButton>
        <DropDownButton items={items} variant={Variant.Outlined} >Outline</DropDownButton>
        <DropDownButton items={items} variant={Variant.Flat} >Flat</DropDownButton>
    </div>
    );
}

Run the project

To run the project, use the following command:

npm run dev

The following example demonstrates how to create a simple Dropdown Button component.

Disabled

The Disabled state illustrates how to render a Dropdown Button component when it should not be interactive, ensuring that users understand its deactivation through styling and functionality.

Color

The Dropdown Button component provides a variety of styles to indicate different alert levels, such as Warning, Success, Error, and Info, by utilizing the color property.

Size

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

Icons

The Dropdown Button includes an icon or image to visually represent the associated action. To add an icon to a Dropdown Button, use the icon property.

Template

The itemTemplate property in the Dropdown Button component allows for the definition of custom templates to display dropdown items. This feature is especially useful for customizing the appearance and layout of dropdown items beyond the default options provided.

Accessibility

The Dropdown 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 Dropdown 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 Dropdown Button component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Dropdown component:

Keyboard interaction

The Dropdown 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 Dropdown component.