SplitButton

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


import SplitButton from 'primevue/splitbutton';

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



<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" />

The severity option specifies the type of the message.



<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger" class="mb-2"></SplitButton>

Raised buttons display a shadow to indicate elevation.



<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger" class="mb-2"></SplitButton>

Rounded buttons have a circular border radius.



<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger" class="mb-2"></SplitButton>

Text buttons are displayed as textual elements.



<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger" class="mb-2"></SplitButton>

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



<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger" class="mb-2"></SplitButton>

Outlined buttons display a border without a background initially.



<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help" class="mb-2"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger" class="mb-2"></SplitButton>

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



<SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" size="large"></SplitButton>

Custom content inside a button is defined as children.



<SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round">
    <Button @click="save">
        <img alt="logo" src="/images/logo.svg" style="width: 1rem" />
        <span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
    </Button>
</SplitButton>

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



<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled />

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

NameElement
p-splitbuttonContainer element.
p-splitbutton-defaultbuttonDefault button.
p-splitbutton-menubuttonDropdown button.
p-tieredmenuOverlay menu.

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
enterspacedown arrowup arrowOpens the menu and moves focus to the first item.

Menu Keyboard Support

KeyFunction
enterIf menuitem has a submenu, opens the submenu otherwise activates the menuitem and closes all open overlays.
spaceIf menuitem has a submenu, opens the submenu otherwise activates the menuitem and closes all open overlays.
escapeIf focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu.
down arrowMoves focus to the next menuitem within the submenu.
up arrowMoves focus to the previous menuitem within the submenu.
alt + up arrowCloses the popup, then moves focus to the target element.
right arrowIn nested mode if option is closed, opens the option otherwise moves focus to the first child option.
left arrowIn nested mode if option is open, closes the option otherwise moves focus to the parent option.
homeMoves focus to the first menuitem within the submenu.
endMoves focus to the last menuitem within the submenu.
any printable characterMoves focus to the menuitem whose label starts with the characters being typed.