Vue3 SplitButton

Vue SplitButton groups a set of commands in an overlay with a default command. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import SplitButton from 'primevue/splitbutton';

Getting Started

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

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 label="Save" icon="pi pi-plus" :model="items"></SplitButton>

MenuModel

SplitButton uses the common MenuModel API to define the items, visit MenuModel API for details.

Severity

Different color options are available as severity levels.

• .p-button-secondary
• .p-button-success
• .p-button-info
• .p-button-warning
• .p-button-help
• .p-button-danger

<SplitButton label="Save" icon="pi pi-plus" :model="items"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger"></SplitButton>

Theming

SplitButton supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue SplitButton showcase for demos and documentation.