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"></p-splitButton>

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"></p-splitButton>

Severity #

The severity property defines the type of button.


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

Raised #

Raised buttons display a shadow to indicate elevation.


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

Rounded #

Rounded buttons have a circular border radius.


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

Text #

Text buttons are displayed as textual elements.


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

Raised Text #

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


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

Outlined #

Outlined buttons display a border without a background initially.


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

Sizes #

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


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

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"></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'}"
></p-splitButton>

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.
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.
tabindex	number	null	When present, it specifies that the element should be disabled.
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.
_menuButtonDisabled	boolean	false	When present, it specifies that the menu button element should be disabled.
_buttonDisabled	boolean	false	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.
_disabled	value :	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.