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

Import


import {SplitButtonModule} from 'primeng/primeng';

Getting Started

SplitButton has a default command button and a collection of menuitems to be displayed in an overlay.


<p-splitButton label="Save" icon="fa-check" (onClick)="save()" [model]="items"></p-splitButton>

MenuModel API

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

Attributes

Name Type Default Description
label string null Text of the button.
icon string null Name of the icon.
iconPos string left Position of the icon, valid values are "left" and "right".
style string null Inline style of the component.
styleClass string null Style class of the component.
menuStyle string null Inline style of the overlay menu.
menuStyleClass string null Style class of the overlay menu.

Events

Name Parameters Description
onClick event: browser event
Callback to invoke when default command button is clicked.

Styling

Following is the list of structural style classes, for theming classes visit theming page. SplitButton uses button and menu components internally, refer to their documentation for the detailed style list.

Name Element
ui-splitbutton Container element.
ui-splitbutton-button Dropdown button.
ui-menu Overlay menu.

Dependencies

None.


<p-growl [value]="msgs"></p-growl>

<p-splitButton label="Save" icon="fa-check" (onClick)="save()" [model]="items"></p-splitButton>


export class SplitButtonDemo implements OnInit {

    msgs: Message[] = [];
    
    items: MenuItem[];
    
    ngOnInit() {
        this.items = [
            {label: 'Update', icon: 'fa-refresh', command: () => {
                this.update();
            }},
            {label: 'Delete', icon: 'fa-close', command: () => {
                this.delete();
            }},
            {label: 'Angular.io', icon: 'fa-link', url: 'http://angular.io'},
            {label: 'Theming', icon: 'fa-paint-brush', routerLink: ['/theming']}
        ];
    }

    save() {
        this.msgs = [];
        this.msgs.push({severity:'info', summary:'Success', detail:'Data Saved'});
    }
    
    update() {
        this.msgs = [];
        this.msgs.push({severity:'info', summary:'Success', detail:'Data Updated'});
    }
    
    delete() {
        this.msgs = [];
        this.msgs.push({severity:'info', summary:'Success', detail:'Data Deleted'});
    }
}