React SplitButton Component

Import#


import { SplitButton } from 'primereact/splitbutton';

Basic#

SplitButton has a default command button and a collection of additional options defined by the model property.


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus"  onClick={save} model={items}></SplitButton>

Disabled#


<SplitButton label="Save" disabled></SplitButton>

Loading#


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus"  onClick={save} model={items} loading></SplitButton>

Severities#

Severities


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus"  onClick={save} model={items}></SplitButton>

Raised#

Raised Buttons


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus"  onClick={save} model={items}></SplitButton>

Rounded#

Rounded Buttons


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus"  onClick={save} model={items}></SplitButton>

Text#

Text Buttons


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus"  onClick={save} model={items}></SplitButton>

Raised Text#

Raised Text Buttons


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus"  onClick={save} model={items}></SplitButton>

Outlined#

Outlined Buttons


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus"  onClick={save} model={items}></SplitButton>

Sizes#

Outlined Buttons


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus"  onClick={save} model={items}></SplitButton>

Style#

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
p-splitbutton	Container element.
p-splitbutton-button	Dropdown button.
p-menu	Overlay menu.

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

Accessibility#

Screen Reader

SplitButton component renders two native button elements, main button uses the label property to define aria-label by default which can be customized with buttonProps. Dropdown button requires an explicit definition to describe it using menuButtonProps option and also includes aria-haspopup, aria-expanded for states along with aria-controls to define the relation between the popup and the button.

The popup overlay uses menu role on the list and each action item has a menuitem role with an aria-label as the menuitem label. The id of the menu refers to the aria-controls of the dropdown button.


<SplitButton buttonProps={{'aria-label': 'Default Action'}} menuButtonProps={{'aria-label': 'More Options'}} />

Main Button Keyboard Support

Key	Function
enter	Activates the button.
space	Activates the button.

Menu Button Keyboard Support

Key	Function
enter	Toggles the visibility of the menu.
space	Toggles the visibility of the menu.
down arrow	Opens the menu and moves focus to the first item.
up arrow	Opens the menu and moves focus to the last item.

Menu Keyboard Support

Key	Function
enter	Actives the menuitem, closes the menu and sets focus on the menu button.
escape	Closes the menu and sets focus on the menu button.
down arrow	Moves focus to the next item, if it is the last one then first item receives the focus.
up arrow	Moves focus to the previous item, if it is the first one then last item receives the focus.
home	Moves focus to the first item.
end	Moves focus to the last item.

API#

Visit the API documentation for detailed information about all the properties, events and methods of the component.

SplitButton