SplitButton

SplitButton groups a set of commands in an overlay with a default command.


import { SplitButton } from 'primereact/splitbutton';
         

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>
         


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


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

Severities


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

Raised Buttons


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

Rounded Buttons


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

Text Buttons


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

Raised Text Buttons


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

Outlined Buttons


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

Outlined Buttons


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

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

NameElement
p-splitbuttonContainer element.
p-splitbutton-buttonDropdown button.
p-menuOverlay menu.
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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

KeyFunction
enterActivates the button.
spaceActivates the button.

Menu Button Keyboard Support

KeyFunction
enterToggles the visibility of the menu.
spaceToggles the visibility of the menu.
down arrowOpens the menu and moves focus to the first item.
up arrowOpens the menu and moves focus to the last item.

Menu Keyboard Support

KeyFunction
enterActives the menuitem, closes the menu and sets focus on the menu button.
escapeCloses the menu and sets focus on the menu button.
down arrowMoves focus to the next item, if it is the last one then first item receives the focus.
up arrowMoves focus to the previous item, if it is the first one then last item receives the focus.
homeMoves focus to the first item.
endMoves focus to the last item.
Visit the API documentation for detailed information about all the properties, events and methods of the component.