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

Import


import {SplitButton} from 'primeng/primeng';
import {SplitButtonItem} from 'primeng/primeng';

Getting Started

SplitButton has a default command button and a collection of p-splitButtonItem components to be displayed in an overlay.


<p-splitButton label="Save" icon="fa-check" (onClick)="save()">
    <p-splitButtonItem icon="fa-close" label="Delete" (onClick)="delete()"></p-splitButtonItem>
    <p-splitButtonItem icon="fa-refresh" label="Update" (onClick)="update()"></p-splitButtonItem>
    <p-splitButtonItem icon="fa-link" label="Angular.io" url="http://angular.io"></p-splitButtonItem>
    <p-splitButtonItem icon="fa-link" label="Theming" [url]="['Theming']"></p-splitButtonItem>
</p-splitButton>

SplitButtonElement

SplitButtonElement defines an item in the overlay using the following options.

Name Type Default Description
icon string null Icon of the item.
label string null Text of the item.
url string/array null URL as string to navigate, also supports router link dsl.
onClick function null Callback to invoke when the item is clicked.

Dynamic Items

SplitButton can also be defined dynamically using *ngFor.


<p-splitButton label="Save" icon="fa-check" (onClick)="save()">
    <p-splitButtonItem *ngFor="#item of items" [icon]="item.icon" [label]="item.label"></p-splitButtonItem>
</p-splitButton>

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

Native component that requires the css of PrimeUI SplitButton.


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

<p-splitButton label="Save" icon="fa-check" (onClick)="save()">
    <p-splitButtonItem icon="fa-close" label="Delete" (onClick)="delete()"></p-splitButtonItem>
    <p-splitButtonItem icon="fa-refresh" label="Update" (onClick)="update()"></p-splitButtonItem>
    <p-splitButtonItem icon="fa-link" label="Angular.io" url="http://angular.io"></p-splitButtonItem>
    <p-splitButtonItem icon="fa-paint-brush" label="Theming" [url]="['Theming']"></p-splitButtonItem>
</p-splitButton>


export class SplitButtonDemo {

    msgs: Message[] = [];

    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'});
    }
}