SplitButton

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

Import #


import { SplitButtonModule } from 'primeng/splitbutton';

Basic #

SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API.


<p-splitButton 
    label="Save" 
    (onClick)="save('info')" 
    [model]="items" />

Nested #

SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API.


<p-splitButton 
    label="Save" 
    (onClick)="save('info')" 
    [model]="items" />

Severity #

The severity property defines the type of button.


<p-splitButton 
    label="Save" 
    (onClick)="save('info')" 
    [model]="items" />
<p-splitButton 
    label="Save" 
    (onClick)="save('info')" 
    [model]="items" 
    severity="secondary" />
<p-splitButton 
    label="Save" 
    (onClick)="save('success')" 
    [model]="items" 
    severity="success" />
<p-splitButton 
    label="Save" 
    (onClick)="save('info')" 
    [model]="items" 
    severity="info" />
<p-splitButton 
    label="Save" 
    (onClick)="save('warn')" 
    [model]="items" 
    severity="warning" />
<p-splitButton 
    label="Save" 
    (onClick)="save('info')" 
    [model]="items" 
    severity="help" />
<p-splitButton 
    label="Save" 
    (onClick)="save('error')" 
    [model]="items" 
    severity="danger" />

Raised #

Raised buttons display a shadow to indicate elevation.


<p-splitButton 
    label="Primary" 
    [model]="items" 
    (onClick)="save('info')" 
    raised />
<p-splitButton 
    label="Secondary" 
    [model]="items" 
    (onClick)="save('info')" 
    raised 
    severity="secondary" />
<p-splitButton 
    label="Success" 
    [model]="items" 
    (onClick)="save('info')" 
    raised 
    severity="success" />
<p-splitButton 
    label="Info" 
    [model]="items" 
    (onClick)="save('info')" 
    raised 
    severity="info" />
<p-splitButton 
    label="Warning" 
    [model]="items" 
    (onClick)="save('info')" 
    raised 
    severity="warning" />
<p-splitButton 
    label="Help" 
    [model]="items" 
    (onClick)="save('info')" 
    raised 
    severity="help" />
<p-splitButton 
    label="Danger" 
    [model]="items" 
    (onClick)="save('info')"
    raised 
    severity="danger" />

Rounded #

Rounded buttons have a circular border radius.


<p-splitButton 
    label="Primary" 
    [model]="items" 
    (onClick)="save('info')" 
    rounded />
<p-splitButton 
    label="Secondary" 
    [model]="items" 
    (onClick)="save('info')" 
    rounded 
    severity="secondary" />
<p-splitButton 
    label="Success" 
    [model]="items" 
    (onClick)="save('info')" 
    rounded 
    severity="success" />
<p-splitButton 
    label="Info" 
    [model]="items" 
    (onClick)="save('info')" 
    rounded 
    severity="info" />
<p-splitButton 
    label="Warning" 
    [model]="items" 
    (onClick)="save('info')" 
    rounded 
    severity="warning" />
<p-splitButton 
    label="Help" 
    [model]="items" 
    (onClick)="save('info')" 
    rounded 
    severity="help" />
<p-splitButton 
    label="Danger" 
    [model]="items" 
    (onClick)="save('info')" 
    rounded 
    severity="danger" />

Text #

Text buttons are displayed as textual elements.


<p-splitButton 
    label="Primary" 
    [model]="items" 
    (onClick)="save('info')" 
    text />
<p-splitButton 
    label="Secondary" 
    [model]="items" 
    (onClick)="save('info')" 
    text 
    severity="secondary" />
<p-splitButton 
    label="Success" 
    [model]="items" 
    (onClick)="save('info')" 
    text 
    severity="success" />
<p-splitButton 
    label="Info" 
    [model]="items" 
    (onClick)="save('info')"
    text 
    severity="info" />
<p-splitButton 
    label="Warning" 
    [model]="items" 
    (onClick)="save('info')" 
    text 
    severity="warning" />
<p-splitButton 
    label="Help" 
    [model]="items" 
    (onClick)="save('info')" 
    text 
    severity="help" />
<p-splitButton 
    label="Danger" 
    [model]="items"
    (onClick)="save('info')" 
    text 
    severity="danger" />

Raised Text #

Text buttons can be displayed as raised as well for elevation.


<p-splitButton 
    label="Primary" 
    [model]="items" 
    (onClick)="save('info')" 
    raised 
    text />
<p-spliButton 
    label="Secondary" 
    [model]="items" 
    (onClick)="save('info')"
    raised 
    text 
    severity="secondary" />
<p-splitButton 
    label="Success" 
    [model]="items" 
    (onClick)="save('info')" 
    raised 
    text 
    severity="success" />
<p-splitButton 
    label="Info" 
    [model]="items" 
    (onClick)="save('info')" 
    raised 
    text 
    severity="info" />
<p-splitButton 
    label="Warning" 
    [model]="items" 
    (onClick)="save('info')" 
    raised 
    text 
    severity="warning" />
<p-splitButton 
    label="Help" 
    [model]="items" 
    (onClick)="save('info')"
    raised 
    text 
    severity="help" />
<p-splitButton 
    label="Danger" 
    [model]="items" 
    (onClick)="save('info')" 
    raised 
    text 
    severity="danger" />

Outlined #

Outlined buttons display a border without a background initially.


<p-splitButton 
    label="Primary" 
    [model]="items" 
    (onClick)="save('info')" 
    outlined />
<p-splitButton 
    label="Secondary" 
    [model]="items" 
    (onClick)="save('info')" 
    outlined 
    severity="secondary" />
<p-splitButton 
    label="Success" 
    [model]="items" 
    (onClick)="save('info')" 
    outlined 
    severity="success" />
<p-splitButton 
    label="Info" 
    [model]="items" 
    (onClick)="save('info')" 
    outlined 
    severity="info" />
<p-splitButton 
    label="Warning" 
    [model]="items" 
    (onClick)="save('info')" 
    outlined 
    severity="warning" />
<p-splitButton 
    label="Help" 
    [model]="items" 
    (onClick)="save('info')" 
    outlined 
    severity="help" />
<p-splitButton 
    label="Danger" 
    [model]="items" 
    (onClick)="save('info')" 
    outlined 
    severity="danger" />

Sizes #

SplitButton provides small and large sizes as alternatives to the standard.


<p-splitButton 
    label="Small" 
    [model]="items" 
    (onClick)="save('info')" 
    size="sm" />
<p-splitButton 
    label="Normal" 
    [model]="items" 
    (onClick)="save('info')" />
<p-splitButton 
    label="Large" 
    [model]="items" 
    (onClick)="save('info')" 
    size="lg" />

Disabled #

When the disabled attribute is present, the element is uneditable and unfocused. Additionally, the disabled states of the button and menu button can be handled independently. The button is disabled when buttonDisabled is present, and the menu button is disabled when menuButtonDisabled is present.


<p-splitButton 
    label="Save" 
    icon="pi pi-plus" 
    (onClick)="save('info')" 
    [model]="items" 
    [disabled]="true" />

Template #

SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API.


<p-splitButton 
    label="Save" 
    (onClick)="save('info')" 
    severity="contrast" 
    [model]="items">
        <ng-template pTemplate="content">
            <span class="flex align-items-center font-bold">
                <img 
                    alt="logo" 
                    src="https://primefaces.org/cdn/primeng/images/logo.svg" 
                    style="height: 1rem; margin-right: 0.5rem" />
                <span>PrimeNG</span>
            </span>
        </ng-template>
</p-splitButton>

Style #

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
p-splitbutton	Container element.
p-splitbutton-menubutton	Dropdown button.
p-menu	Overlay menu.

Accessibility #

Screen Reader

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.


<p-splitButton 
    [buttonProps]="{'aria-label': 'Default Action'}" 
    [menuButtonProps]="{'aria-label': 'More Options'}" />

Main Button Keyboard Support

Key	Function
enter	Activates the button.
space	Activates the button.

Menu Button Keyboard Support

Key	Function
enter	Toggles the visibility of the menu.
space	Toggles the visibility of the menu.
down arrow	Opens the menu and moves focus to the first item.
up arrow	Opens the menu and moves focus to the last item.

Menu Keyboard Support

Key	Function
enter	Actives the menuitem, closes the menu and sets focus on the menu button.
escape	Closes the menu and sets focus on the menu button.
down arrow	Moves focus to the next item, if it is the last one then first item receives the focus.
up arrow	Moves focus to the previous item, if it is the first one then last item receives the focus.
home	Moves focus to the first item.
end	Moves focus to the last item.

SplitButton API

API defines helper props, events and others for the PrimeNG SplitButton module.

SplitButton #

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

Properties #

Defines the input properties of the component.

name	type	default	description
model	MenuItem[]	null	MenuModel instance to define the overlay items.
severity	"success" \| "info" \| "warning" \| "primary" \| "help" \| "danger" \| "secondary" \| "contrast"	null	Defines the style of the button.
raised	boolean	false	Add a shadow to indicate elevation.
rounded	boolean	false	Add a circular border radius to the button.
text	boolean	false	Add a textual class to the button without a background initially.
outlined	boolean	false	Add a border class without a background initially.
size	"small" \| "large"	null	Defines the size of the button.
plain	boolean	false	Add a plain textual class to the button without a background initially.
icon	string	null	Name of the icon.
iconPos	SplitButtonIconPosition	left	Position of the icon.
label	string	null	Text of the button.
tooltip	string	null	Tooltip for the main button.
tooltipOptions	string	null	Tooltip options for the main button.
style	Object	null	Inline style of the element.
styleClass	string	null	Class of the element.
menuStyle	Object	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 (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
dir	string	null	Indicates the direction of the element.
expandAriaLabel	string	null	Defines a string that labels the expand button for accessibility.
showTransitionOptions	string	.12s cubic-bezier(0, 0, 0.2, 1)	Transition options of the show animation.
hideTransitionOptions	string	.1s linear	Transition options of the hide animation.
autofocus	boolean	false	When present, it specifies that the component should automatically get focus on load.
disabled	boolean	null	When present, it specifies that the element should be disabled.
tabindex	number	null	Index of the element in tabbing order.
menuButtonDisabled	boolean	null	When present, it specifies that the menu button element should be disabled.
buttonDisabled	boolean	null	When present, it specifies that the button element should be disabled.

Emitters #

Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.

name	parameters	description
onClick	event : MouseEvent	Callback to invoke when default command button is clicked.
onMenuHide	value : any	Callback to invoke when overlay menu is hidden.
onMenuShow	value : any	Callback to invoke when overlay menu is shown.
onDropdownClick	event : MouseEvent	Callback to invoke when dropdown button is clicked.

Templates #

Defines the templates used by the component.

name	parameters	description
content		Custom template of content.
dropdownicon		Custom template of dropdownicon.