import SplitButton from 'primevue/splitbutton';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/splitbutton/splitbutton.min.js"></script>
SplitButton has a default command button and a collection of additional options defined by the model property.
<SplitButton label="Save" icon="pi pi-plus" :model="items"></SplitButton>
export default {
data() {
return {
items: [
{
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
}
},
{
label: 'Delete',
icon: 'pi pi-times',
command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
}
},
{
label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => {
window.location.href = 'https://vuejs.org/'
}
},
{
label: 'Upload',
icon: 'pi pi-upload',
to: '/fileupload'
}
]
}
}
}
SplitButton uses the common MenuModel API to define the items, visit
Different color options are available as severity levels.
<SplitButton label="Primary" :model="items"></SplitButton>
<SplitButton label="Secondary" :model="items" class="p-button-secondary"></SplitButton>
<SplitButton label="Success" :model="items" class="p-button-success"></SplitButton>
<SplitButton label="Info" :model="items" class="p-button-info"></SplitButton>
<SplitButton label="Warning" :model="items" class="p-button-warning"></SplitButton>
<SplitButton label="Help" :model="items" class="p-button-help"></SplitButton>
<SplitButton label="Danger" :model="items" class="p-button-danger"></SplitButton>
SplitButton can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.
<SplitButton label="Proceed" :model="items" class="p-button-raised p-button-rounded"></SplitButton>
Button part of the content can easily be customized with the default slot instead of using the built-in modes.
<SplitButton :model="items" class="bg-primary border-round">
<Button @click="save">
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 1rem" />
<span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
</Button>
</SplitButton>
Any property such as tabindex are passed to the underlying input element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| label | string | null | Text of the button. |
| icon | string | null | Name of the icon. |
| model | object | null | MenuModel instance to define the overlay items. |
| autoZIndex | boolean | true | Whether to automatically manage layering. |
| baseZIndex | number | 0 | Base zIndex value to use in layering. |
| appendTo | string | body | A valid query selector or an HTMLElement to specify where the overlay gets attached. |
| disabled | boolean | false | When present, it specifies that the element should be disabled. |
| style | any | null | Style class of the component. |
| class | string | null | Inline style of the component. |
| buttonProps | object | null | Uses to pass all properties of the HTMLButtonElement to the default button. |
| menuButtonProps | object | null | Uses to pass all properties of the HTMLButtonElement to the menu button. |
| menuButtonIcon | string | null | Name of the menu button icon. |
Any valid event such as focus, blur and input are passed to the underlying button element. Following are the additional events to configure the component.
| Name | Parameters | Description |
|---|---|---|
| click | event: Browser event | Callback to invoke when main button is clicked. |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-splitbutton | Container element. |
| p-splitbutton-defaultbutton | Default button. |
| p-splitbutton-menubutton | Dropdown button. |
| p-tieredmenu | 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 space down arrow up arrow | Opens the menu and moves focus to the first item. |
| Key | Function |
|---|---|
| enter | If menuitem has a submenu, opens the submenu otherwise activates the menuitem and closes all open overlays. |
| space | If menuitem has a submenu, opens the submenu otherwise activates the menuitem and closes all open overlays. |
| escape | If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu. |
| down arrow | Moves focus to the next menuitem within the submenu. |
| up arrow | Moves focus to the previous menuitem within the submenu. |
| alt + up arrow | Closes the popup, then moves focus to the target element. |
| right arrow | In nested mode if option is closed, opens the option otherwise moves focus to the first child option. |
| left arrow | In nested mode if option is open, closes the option otherwise moves focus to the parent option. |
| home | Moves focus to the first menuitem within the submenu. |
| end | Moves focus to the last menuitem within the submenu. |
| any printable character | Moves focus to the menuitem whose label starts with the characters being typed. |
None.