	Language
	English
	English
	English
	French
	German
	German
	German
	Italian
	Korean
	Spanish
	Catalan
	Dutch
	Portuguese
	Portuguese
	Arabic
	Arabic
	Bulgarian
	Bangla
	Bosnian
	Czech
	Greek
	Estonian
	Persian
	Finnish
	Danish
	Hindi
	Indonesian
	Icelandic
	Croatian
	Japanese
	Hungarian
	Hebrew
	Georgian
	Central Kurdish
	Khmer
	Kyrgyz
	Kazakh
	Lithuanian
	Latvian
	Malay
	Norwegian
	Polish
	Romanian
	Russian
	Slovak
	Slovenian
	Serbian
	Serbian
	Swedish
	Thai
	Turkish
	Ukrainian
	Uzbek
	Vietnamese
	Chinese
	Chinese

SplitButton

SplitButton displays a default command and additional ones in an overlay.

SplitButton Tag Documentation

SplitButton displays a default command and additional ones in an overlay.

Name	Type	Required	Default	Description
id	String	false	generated	Unique identifier of the component in a namingContainer.
rendered	boolean	false	true	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	UIComponent	false	generated	An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar	String	false	generated ('widget_' + componentClientId)	Name of the client side component.
accesskey	String	false		Access key to transfer focus to the input element.
action	MethodExpression	false		A method expression or a string outcome to process when command is executed.
actionListener	ActionListener	false		An action listener to process when command is executed.
ajax	boolean	false	true	Icon of the button.
alt	String	false
appendTo	String	false	@(body)	Appends the overlay to the element defined by search expression.
ariaLabel	String	false		The aria-label attribute is used to define a string that labels the current element for accessibility.
async	boolean	false	false	When set to true, ajax requests are not queued.
delay	String	false		If less than delay milliseconds elapses between calls to request() only the most recent one is sent and all other requests are discarded. If this option is not specified, or if the value of delay is the literal string 'none' without the quotes, no delay is used.
dir	String	false		Direction indication for text that does not inherit directionality.
disableOnAjax	boolean	false	true	If true, the button will be disabled during Ajax requests triggered by the button or its menu items.
disabled	boolean	false	false	Specifies that an element should be disabled.
dynamic	boolean	false	false	Defines if dynamic loading is enabled for the element's panel. If the value is "true", the overlay is not rendered on page load to improve performance.
filter	boolean	false	false	Displays an input filter for the list.
filterFunction	String	false		Client side function to use in custom filterMatchMode.
filterInputAutoFocus	boolean	false	true	Defines if filter input should receive focus when overlay popup is displayed.
filterMatchMode	String	false		Match mode for filtering, valid values are startsWith (default), contains, endsWith and custom.
filterNormalize	boolean	false	false	Defines if filtering would be done using normalized values (accents will be removed from characters).
filterPlaceholder	String	false		Watermark displayed in the filter input field before the user enters a value in an browser.
form	String	false	The enclosing form	Form to serialize for an ajax request.
global	boolean	false	true	Global ajax requests are listened by ajaxStatus component, setting global to false will not trigger ajaxStatus.
icon	String	false		Icon of the button.
iconPos	String	false	left	Position of the icon.
ignoreAutoUpdate	boolean	false	false	If true, components which autoUpdate="true" will not be updated for this request. If not specified, or the value is false, no such indication is made.
ignoreComponentNotFound	boolean	false	false	If true, unresolvable components (ComponentNotFoundException) referenced in the update/process attribute are ignored.
image	String	false
immediate	boolean	false	false	When set true, process validations logic is executed at apply request values phase for this component.
inline	boolean	false	false	Displays button inline instead of fitting the content width, only used by mobile.
label	String	false		A localized user presentable name.
lang	String	false
menuStyleClass	String	false		Style class of the overlay menu element.
model	MenuModel	false		A menu model instance to create the items of splitButton programmatically.
onblur	String	false		Fires when an element loses focus.
onchange	String	false		Fires when the value of an element has been changed.
onclick	String	false		Fires when a mouse click on the element.
oncomplete	String	false		Client-side javascript callback to execute when ajax request is completed.
ondblclick	String	false		Fires when a mouse double-click on the element.
onerror	String	false		Client-side javascript callback to execute when ajax request fails.
onfocus	String	false		Fires when an element gets focus.
onkeydown	String	false		Fires when a user is pressing a key.
onkeypress	String	false		Fires when a user presses a key.
onkeyup	String	false		Fires when a user releases a key.
onmousedown	String	false		Fires when a mouse button is pressed down on an element.
onmousemove	String	false		Fires when the mouse pointer is moving while it is over an element.
onmouseout	String	false		Fires when the mouse pointer moves out of an element.
onmouseover	String	false		Fires when the mouse pointer moves onto an element.
onmouseup	String	false		Fires when a mouse button is released over an element.
onselect	String	false
onstart	String	false		Client-side javascript callback to execute before ajax request begins.
onsuccess	String	false		Client-side javascript callback to execute when ajax request succeeds.
partialSubmit	boolean	false	false	Enables serialization of values belonging to the partially processed components only.
partialSubmitFilter	String	false		Selector to use when partial submit is on, default is ":input" to select all descendant inputs of a partially processed components.
process	String	false		Component(s) to process in partial request.
readonly	boolean	false	false	Specifies that an input field is read-only.
resetValues	boolean	false	false	If true, local values of input components to be updated within the ajax request would be reset.
role	String	false
size	String	false		Defines the size of the button, valid values are "small" and "large".
style	String	false		Specifies an inline CSS style for an element.
styleClass	String	false		Specifies one or more CSS class names for an element.
tabindex	String	false		Specifies the tab order of an element.
timeout	int	false	0	Timeout in milliseconds for ajax request, whereas 0 means no timeout.
title	String	false		Specifies extra information about an element (displayed as a tooltip).
type	String	false
update	String	false		Component(s) to update with ajax.
value	Object	false		Value of the component.

Name	Description
No records found.

Name	Type	Default	Description
No records found.

Name	Library	Target
components.css	primefaces
jquery/jquery.js	primefaces
core.js	primefaces
components.js	primefaces

Family org.primefaces.component

Type org.primefaces.component.SplitButton

Class org.primefaces.component.splitbutton.SplitButton

Renderer Type org.primefaces.component.SplitButtonRenderer

Renderer Class org.primefaces.component.splitbutton.SplitButtonRenderer

RESOURCES

Tag Documentation Documentation Documentation JSDoc

Basic

Dynamic

Programmatic Menu

Advanced

Severities

OverlayPanel

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ajax Disabling and Status Icon

Sizes


<style>
    .p-splitbutton {
        margin-right: .5rem;
    }
</style>

<div class="card">
    <h:form>
        <p:growl id="messages"/>

        <h5 class="mt-0">Basic</h5>
        <p:splitButton value="Save" action="#{buttonView.save}" update="messages" icon="pi pi-save">
            <p:menuitem value="Update" action="#{buttonView.update}" update="messages" icon="pi pi-refresh"/>
            <p:menuitem value="Delete" action="#{buttonView.delete}" ajax="false" icon="pi pi-times"/>
            <p:divider />
            <p:menuitem value="Homepage" url="http://www.primefaces.org" icon="pi pi-home"/>
        </p:splitButton>

        <h5>Dynamic</h5>
        <p:splitButton value="Save" action="#{buttonView.save}" update="messages" icon="pi pi-save" dynamic="true">
            <p:menuitem value="Update" action="#{buttonView.update}" update="messages" icon="pi pi-refresh"/>
            <p:menuitem value="Delete" action="#{buttonView.delete}" ajax="false" icon="pi pi-times"/>
            <p:divider />
            <p:menuitem value="Homepage" url="http://www.primefaces.org" icon="pi pi-home"/>
        </p:splitButton>

        <h5>Programmatic Menu</h5>
        <p:splitButton value="Save" model="#{buttonView.model}" action="#{buttonView.save}"
                           update="messages" icon="pi pi-save"/>

        <h5>Advanced</h5>
        <p:splitButton value="Save" action="#{buttonView.save}" update="messages" icon="pi pi-save"
                       filter="true" filterMatchMode="startsWith">
            <p:submenu label="Ajax">
                <p:menuitem value="Save" action="#{buttonView.save}" update="messages" icon="pi pi-save"/>
                <p:menuitem value="Update" action="#{buttonView.update}" update="messages"
                            icon="pi pi-refresh"/>
            </p:submenu>
            <p:submenu label="Non-Ajax">
                <p:menuitem value="Delete" action="#{buttonView.delete}" update="messages" ajax="false"
                            icon="pi pi-times"/>
            </p:submenu>
            <p:submenu label="Navigations">
                <p:menuitem value="External" url="http://www.primefaces.org" icon="pi pi-home"/>
            </p:submenu>
            <p:divider />
            <p:menuitem value="Internal" icon="pi pi-star"/>
        </p:splitButton>

        <h5>Severities</h5>
        <p:splitButton value="Save" action="#{buttonView.save}" update="messages" icon="pi pi-save" styleClass="p-button-secondary">
            <p:menuitem value="Update" action="#{buttonView.update}" update="messages" icon="pi pi-refresh"/>
            <p:menuitem value="Delete" action="#{buttonView.delete}" ajax="false" icon="pi pi-times"/>
            <p:divider />
            <p:menuitem value="Homepage" url="http://www.primefaces.org" icon="pi pi-home"/>
        </p:splitButton>
        <p:splitButton value="Save" action="#{buttonView.save}" update="messages" icon="pi pi-save" styleClass="p-button-success">
            <p:menuitem value="Update" action="#{buttonView.update}" update="messages" icon="pi pi-refresh"/>
            <p:menuitem value="Delete" action="#{buttonView.delete}" ajax="false" icon="pi pi-times"/>
            <p:divider />
            <p:menuitem value="Homepage" url="http://www.primefaces.org" icon="pi pi-home"/>
        </p:splitButton>
        <p:splitButton value="Save" action="#{buttonView.save}" update="messages" icon="pi pi-save" styleClass="p-button-info">
            <p:menuitem value="Update" action="#{buttonView.update}" update="messages" icon="pi pi-refresh"/>
            <p:menuitem value="Delete" action="#{buttonView.delete}" ajax="false" icon="pi pi-times"/>
            <p:divider />
            <p:menuitem value="Homepage" url="http://www.primefaces.org" icon="pi pi-home"/>
        </p:splitButton>
        <p:splitButton value="Save" action="#{buttonView.save}" update="messages" icon="pi pi-save" styleClass="p-button-warning">
            <p:menuitem value="Update" action="#{buttonView.update}" update="messages" icon="pi pi-refresh"/>
            <p:menuitem value="Delete" action="#{buttonView.delete}" ajax="false" icon="pi pi-times"/>
            <p:divider />
            <p:menuitem value="Homepage" url="http://www.primefaces.org" icon="pi pi-home"/>
        </p:splitButton>
        <p:splitButton value="Save" action="#{buttonView.save}" update="messages" icon="pi pi-save" styleClass="p-button-help">
            <p:menuitem value="Update" action="#{buttonView.update}" update="messages" icon="pi pi-refresh"/>
            <p:menuitem value="Delete" action="#{buttonView.delete}" ajax="false" icon="pi pi-times"/>
            <p:divider />
            <p:menuitem value="Homepage" url="http://www.primefaces.org" icon="pi pi-home"/>
        </p:splitButton>
        <p:splitButton value="Save" action="#{buttonView.save}" update="messages" icon="pi pi-save" styleClass="p-button-danger">
            <p:menuitem value="Update" action="#{buttonView.update}" update="messages" icon="pi pi-refresh"/>
            <p:menuitem value="Delete" action="#{buttonView.delete}" ajax="false" icon="pi pi-times"/>
            <p:divider />
            <p:menuitem value="Homepage" url="http://www.primefaces.org" icon="pi pi-home"/>
        </p:splitButton>

        <h5>OverlayPanel</h5>
        <p:splitButton id="overlayPanel" value="OverlayPanel">
            <p:overlayPanel style="width:350px">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </p:overlayPanel>
        </p:splitButton>

        <h5>Ajax Disabling and Status Icon</h5>
        <p:splitButton value="Save" action="#{buttonView.sleepAndSave}"
                       update="messages" icon="pi pi-save">
            <p:menuitem value="Update" action="#{buttonView.sleepAndUpdate}" update="messages" icon="pi pi-refresh"/>
            <p:menuitem value="Delete" action="#{buttonView.sleepAndDelete}" update="messages" icon="pi pi-times"/>
        </p:splitButton>

        <p:splitButton value="No Icon" action="#{buttonView.sleepAndSave}"
                       update="messages">
            <p:menuitem value="Update" action="#{buttonView.sleepAndUpdate}" update="messages" icon="pi pi-refresh"/>
            <p:menuitem value="Delete" action="#{buttonView.sleepAndDelete}" update="messages" icon="pi pi-times"/>
        </p:splitButton>

        <h5 id="sizes">Sizes</h5>
        <p:splitButton value="Small" icon="pi pi-save" size="small">
            <p:menuitem value="Update" action="#{buttonView.update}" update="messages" icon="pi pi-refresh"/>
            <p:menuitem value="Delete" action="#{buttonView.delete}" ajax="false" icon="pi pi-times"/>
            <p:divider />
            <p:menuitem value="Homepage" url="http://www.primefaces.org" icon="pi pi-home"/>
        </p:splitButton>
        <p:splitButton value="Normal" icon="pi pi-save">
            <p:menuitem value="Update" action="#{buttonView.update}" update="messages" icon="pi pi-refresh"/>
            <p:menuitem value="Delete" action="#{buttonView.delete}" ajax="false" icon="pi pi-times"/>
            <p:divider />
            <p:menuitem value="Homepage" url="http://www.primefaces.org" icon="pi pi-home"/>
        </p:splitButton>
        <p:splitButton value="Large" icon="pi pi-save" size="large">
            <p:menuitem value="Update" action="#{buttonView.update}" update="messages" icon="pi pi-refresh"/>
            <p:menuitem value="Delete" action="#{buttonView.delete}" ajax="false" icon="pi pi-times"/>
            <p:divider />
            <p:menuitem value="Homepage" url="http://www.primefaces.org" icon="pi pi-home"/>
        </p:splitButton>
    </h:form>
</div>


package org.primefaces.showcase.view.button;

import org.primefaces.model.menu.DefaultMenuItem;
import org.primefaces.model.menu.DefaultMenuModel;
import org.primefaces.model.menu.DefaultSubMenu;
import org.primefaces.model.menu.MenuModel;

import java.util.concurrent.TimeUnit;

import jakarta.annotation.PostConstruct;
import jakarta.enterprise.context.RequestScoped;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.inject.Named;

@Named
@RequestScoped
public class ButtonView {

    private MenuModel model;

    @PostConstruct
    public void init() {
        model = new DefaultMenuModel();

        //First submenu
        DefaultMenuItem item = DefaultMenuItem.builder()
                .value("External")
                .url("http://www.primefaces.org")
                .icon("pi pi-home")
                .build();

        DefaultSubMenu firstSubmenu = DefaultSubMenu.builder()
                .label("Dynamic Submenu")
                .addElement(item)
                .build();

        model.getElements().add(firstSubmenu);

        //Second submenu
        item = DefaultMenuItem.builder()
                .id("mniSave")
                .value("Save")
                .icon("pi pi-save")
                .function((i) -> save())
                .update("messages")
                .build();

        DefaultSubMenu secondSubmenu = DefaultSubMenu.builder()
                .label("Dynamic Actions")
                .addElement(item)
                .build();

        item = DefaultMenuItem.builder()
                .value("Delete")
                .icon("pi pi-times")
                .command("#{buttonView.delete}")
                .ajax(false)
                .build();
        secondSubmenu.getElements().add(item);

        model.getElements().add(secondSubmenu);
    }

    public MenuModel getModel() {
        return model;
    }

    public String save() {
        addMessage("Data saved");
        return null;
    }

    public void update() {
        addMessage("Data updated");
    }

    public void delete() {
        addMessage("Data deleted");
    }

    public String sleepAndSave() throws InterruptedException {
        TimeUnit.SECONDS.sleep(1);
        return save();
    }

    public void sleepAndUpdate() throws InterruptedException {
        TimeUnit.SECONDS.sleep(1);
        update();
    }

    public void sleepAndDelete() throws InterruptedException {
        TimeUnit.SECONDS.sleep(1);
        delete();
    }

    public void buttonAction() {
        addMessage("Welcome to PrimeFaces!!");
    }

    public void addMessage(String summary) {
        FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, summary, null);
        FacesContext.getCurrentInstance().addMessage(null, message);
    }
}

SplitButton

SplitButton Tag Documentation

Basic

Dynamic

Programmatic Menu

Dynamic Submenu

Dynamic Actions

Advanced

Ajax

Non-Ajax

Navigations

Severities

OverlayPanel

Ajax Disabling and Status Icon

Sizes

Usage

Reloading page