SplitButton

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


import { SplitButton } from 'primereact/splitbutton';
         

SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API.


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

SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API.


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

Severity defines the type of button.


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" />
         

Raised buttons display a shadow to indicate elevation.


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised />
         

Rounded buttons have a circular border radius.


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} rounded />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" rounded />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" rounded />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" rounded />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" rounded />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" rounded />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" rounded />
         

Text buttons are displayed as textual elements.


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" text />
         

Text buttons can be displayed as raised as well for elevation.


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised text />
         

Outlined buttons display a border without a background initially.


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" outlined />
         

SplitButton provides small and large sizes as alternatives to the standard.


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

When disabled is present, the element cannot be edited and focused.


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

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.