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.
Name | Element |
---|---|
p-splitbutton | Container element. |
p-splitbutton-button | Dropdown button. |
p-menu | Overlay menu. |
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'}} />
Key | Function |
---|---|
enter | Activates the button. |
space | Activates the button. |
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. |
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. |