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

Basic

Severities

RTL

Import


import {SplitButtonModule} from 'primeng/splitbutton';

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.

Properties

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.
appendTo any null Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element.
disabled boolean false When present, it specifies that the component should be disabled.
tabindex number null Index of the element in tabbing order.
dir string null Indicates the direction of the element.

Events

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

Severity

Different color options are available to define severity levels.

  • .ui-button-secondary
  • .ui-button-success
  • .ui-button-info
  • .ui-button-warning
  • .ui-button-danger

<p-splitButton label="Save" icon="fa-check" [model]="items" styleClass="ui-button-warning"></p-splitButton>

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.

 View on GitHub 

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

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

<h3>Severities</h3>
<p-splitButton label="Save" icon="fa-check" (onClick)="save()" [model]="items" styleClass="ui-button-secondary"></p-splitButton>
<p-splitButton label="Save" icon="fa-check" (onClick)="save()" [model]="items" styleClass="ui-button-success"></p-splitButton>
<p-splitButton label="Save" icon="fa-check" (onClick)="save()" [model]="items" styleClass="ui-button-info"></p-splitButton>
<p-splitButton label="Save" icon="fa-check" (onClick)="save()" [model]="items" styleClass="ui-button-warning"></p-splitButton>
<p-splitButton label="Save" icon="fa-check" (onClick)="save()" [model]="items" styleClass="ui-button-danger"></p-splitButton>

<h3>RTL</h3>
<p-splitButton label="Save" icon="fa-check" (onClick)="save()" [model]="items" dir="rtl"></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'});
    }
}