	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

	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

CommandButton

CommandButton is an action component to process forms and invoke listeners remotely.

CommandButton Tag Documentation

CommandButton is an extended version of standard Faces commandButton with ajax and skinning features.

Name	Type	Required	Default	Description
alt	String	false
image	String	false
lang	String	false
onselect	String	false
role	String	false
type	String	false
accesskey	String	false		Access key to transfer focus to the input element.
label	String	false		A localized user presentable name.
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.
binding	UIComponent	false	generated	An EL expression referring to a server side UIComponent instance in a backing bean.
rendered	boolean	false	true	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
onstart	String	false		Client-side javascript callback to execute before ajax request begins.
onerror	String	false		Client-side javascript callback to execute when ajax request fails.
oncomplete	String	false		Client-side javascript callback to execute when ajax request is completed.
onsuccess	String	false		Client-side javascript callback to execute when ajax request succeeds.
process	String	false		Component(s) to process in partial request.
update	String	false		Component(s) to update with ajax.
escape	boolean	false	false	Defines if label of the component is escaped or not.
size	String	false		Defines the size of the button, valid values are "small" and "large".
dir	String	false		Direction indication for text that does not inherit directionality.
inline	boolean	false	false	Displays button inline instead of fitting the content width, only used by mobile.
partialSubmit	boolean	false	false	Enables serialization of values belonging to the partially processed components only.
onmousedown	String	false		Fires when a mouse button is pressed down on an element.
onmouseup	String	false		Fires when a mouse button is released over an element.
onclick	String	false		Fires when a mouse click on the element.
ondblclick	String	false		Fires when a mouse double-click on the element.
onfocus	String	false		Fires when an element gets focus.
onblur	String	false		Fires when an element loses 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.
onmousemove	String	false		Fires when the mouse pointer is moving while it is over an element.
onmouseover	String	false		Fires when the mouse pointer moves onto an element.
onmouseout	String	false		Fires when the mouse pointer moves out of an element.
onchange	String	false		Fires when the value of an element has been changed.
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.
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.
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.
resetValues	boolean	false	false	If true, local values of input components to be updated within the ajax request would be reset.
disableOnAjax	boolean	false	true	If true, the button will be disabled during Ajax requests triggered by the button.
ignoreComponentNotFound	boolean	false	false	If true, unresolvable components (ComponentNotFoundException) referenced in the update/process attribute are ignored.
widgetVar	String	false	generated ('widget_' + componentClientId)	Name of the client side widget.
iconPos	String	false	left	Position of the icon.
partialSubmitFilter	String	false		Selector to use when partial submit is on, default is ":input" to select all descendant inputs of a partially processed components.
style	String	false		Specifies an inline CSS style for an element.
title	String	false		Specifies extra information about an element (displayed as a tooltip).
styleClass	String	false		Specifies one or more CSS class names for an element.
disabled	boolean	false	false	Specifies that an element should be disabled.
readonly	boolean	false	false	Specifies that an input field is read-only.
ajax	boolean	false	true	Specifies the submit mode, when set to true (default), submit would be made with Ajax.
tabindex	String	false		Specifies the tab order of an element.
ariaLabel	String	false		The aria-label attribute is used to define a string that labels the current element for accessibility.
timeout	int	false	0	Timeout in milliseconds for ajax request, whereas 0 means no timeout.
id	String	false	generated	Unique identifier of the component in a namingContainer.
value	Object	false		Value of the component.
renderDisabledClick	boolean	false	false	When enabled, click event can be added to disabled button.
async	boolean	false	false	When set to true, ajax requests are not queued.
validateClient	boolean	false	false	When set to true client side validation is enabled, global setting is required to be enabled as a prerequisite.
enabledByValidateClient	boolean	false	false	When set to true this button is only enabled after successful client side validation. Used together with p:clientValidator on all relevant input-components.
immediate	boolean	false	false	When set true, process validations logic is executed at apply request values phase for this component.

Name	Description
No records found.

Name	Type	Default	Description
click	AjaxBehaviorEvent	true	Fires when the button is clicked.
dialogReturn	SelectEvent	false	Fired when a dialog is closed.

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

Family org.primefaces.component

Type org.primefaces.component.CommandButton

Class org.primefaces.component.commandbutton.CommandButton

Renderer Type org.primefaces.component.CommandButtonRenderer

Renderer Class org.primefaces.component.commandbutton.CommandButtonRenderer

RESOURCES

Tag DocumentationNew DocumentationNew Documentation JSDoc

Basic

Icons

Severities

Raised Buttons

Rounded Buttons

Flat Buttons

Raised Text Buttons

Outlined Buttons

Rounded Icon Buttons

Rounded Text Icon Buttons

Rounded and Outlined Icon Buttons

Ajax Disabling and Status Icon


<style>
    button.ui-button {
        margin-right: .5rem;
    }
</style>

<div class="card">
    <h5>Basic</h5>
    <p:commandButton type="button" value="Submit" />
    <p:commandButton type="button" value="Disabled" disabled="true" />

    <h5>Icons</h5>
    <p:commandButton type="button" icon="pi pi-check" title="Save"/>
    <p:commandButton type="button" value="Submit" icon="pi pi-check" />
    <p:commandButton type="button" value="Submit" icon="pi pi-check" iconPos="right" />

    <h5>Severities</h5>
    <p:commandButton type="button" value="Primary" />
    <p:commandButton type="button" value="Secondary" styleClass="ui-button-secondary" />
    <p:commandButton type="button" value="Success" styleClass="ui-button-success" />
    <p:commandButton type="button" value="Info" styleClass="ui-button-info" />
    <p:commandButton type="button" value="Warning" styleClass="ui-button-warning" />
    <p:commandButton type="button" value="Help" styleClass="ui-button-help" />
    <p:commandButton type="button" value="Danger" styleClass="ui-button-danger" />

    <h5>Raised Buttons</h5>
    <p:commandButton type="button" value="Primary" styleClass="ui-button-raised" />
    <p:commandButton type="button" value="Secondary" styleClass="ui-button-raised ui-button-secondary" />
    <p:commandButton type="button" value="Success" styleClass="ui-button-raised ui-button-success" />
    <p:commandButton type="button" value="Info" styleClass="ui-button-raised ui-button-info" />
    <p:commandButton type="button" value="Warning" styleClass="ui-button-raised ui-button-warning" />
    <p:commandButton type="button" value="Help" styleClass="ui-button-raised ui-button-help" />
    <p:commandButton type="button" value="Danger" styleClass="ui-button-raised ui-button-danger" />

    <h5>Rounded Buttons</h5>
    <p:commandButton type="button" value="Primary" styleClass="rounded-button" />
    <p:commandButton type="button" value="Secondary" styleClass="rounded-button ui-button-secondary" />
    <p:commandButton type="button" value="Success" styleClass="rounded-button ui-button-success" />
    <p:commandButton type="button" value="Info" styleClass="rounded-button ui-button-info" />
    <p:commandButton type="button" value="Warning" styleClass="rounded-button ui-button-warning" />
    <p:commandButton type="button" value="Help" styleClass="rounded-button ui-button-help" />
    <p:commandButton type="button" value="Danger" styleClass="rounded-button ui-button-danger" />

    <h5>Flat Buttons</h5>
    <p:commandButton type="button" value="Primary" styleClass="ui-button-flat" />
    <p:commandButton type="button" value="Secondary" styleClass="ui-button-secondary ui-button-flat" />
    <p:commandButton type="button" value="Success" styleClass="ui-button-success ui-button-flat" />
    <p:commandButton type="button" value="Info" styleClass="ui-button-info ui-button-flat" />
    <p:commandButton type="button" value="Warning" styleClass="ui-button-warning ui-button-flat" />
    <p:commandButton type="button" value="Help" styleClass="ui-button-help ui-button-flat" />
    <p:commandButton type="button" value="Danger" styleClass="ui-button-danger ui-button-flat" />
    <p:commandButton type="button" value="Plain" styleClass="ui-button-flat ui-button-plain" />

    <h5>Raised Text Buttons</h5>
    <p:commandButton type="button" value="Primary" styleClass="ui-button-raised ui-button-flat" />
    <p:commandButton type="button" value="Secondary" styleClass="ui-button-raised ui-button-secondary ui-button-flat" />
    <p:commandButton type="button" value="Success" styleClass="ui-button-raised ui-button-success ui-button-flat" />
    <p:commandButton type="button" value="Info" styleClass="ui-button-raised ui-button-info ui-button-flat" />
    <p:commandButton type="button" value="Warning" styleClass="ui-button-raised ui-button-warning ui-button-flat" />
    <p:commandButton type="button" value="Help" styleClass="ui-button-raised ui-button-help ui-button-flat" />
    <p:commandButton type="button" value="Danger" styleClass="ui-button-raised ui-button-danger ui-button-flat" />
    <p:commandButton type="button" value="Plain" styleClass="ui-button-raised ui-button-flat ui-button-plain" />

    <h5>Outlined Buttons</h5>
    <p:commandButton type="button" value="Primary" styleClass="ui-button-outlined" />
    <p:commandButton type="button" value="Secondary" styleClass="ui-button-outlined ui-button-secondary" />
    <p:commandButton type="button" value="Success" styleClass="ui-button-outlined ui-button-success" />
    <p:commandButton type="button" value="Info" styleClass="ui-button-outlined ui-button-info" />
    <p:commandButton type="button" value="Warning" styleClass="ui-button-outlined ui-button-warning" />
    <p:commandButton type="button" value="Help" styleClass="ui-button-outlined ui-button-help" />
    <p:commandButton type="button" value="Danger" styleClass="ui-button-outlined ui-button-danger" />

    <h5>Rounded Icon Buttons</h5>
    <p:commandButton type="button" icon="pi pi-bookmark" styleClass="rounded-button ui-button-secondary" />
    <p:commandButton type="button" icon="pi pi-search" styleClass="rounded-button ui-button-success" />
    <p:commandButton type="button" icon="pi pi-user" styleClass="rounded-button ui-button-info" />
    <p:commandButton type="button" icon="pi pi-bell" styleClass="rounded-button ui-button-warning" />
    <p:commandButton type="button" icon="pi pi-heart" styleClass="rounded-button ui-button-help" />
    <p:commandButton type="button" icon="pi pi-times" styleClass="rounded-button ui-button-danger" />
    <p:commandButton type="button" icon="pi pi-check" styleClass="rounded-button" />

    <h5>Rounded Text Icon Buttons</h5>
    <p:commandButton type="button" icon="pi pi-check" styleClass="rounded-button ui-button-flat" />
    <p:commandButton type="button" icon="pi pi-bookmark" styleClass="rounded-button ui-button-secondary ui-button-flat" />
    <p:commandButton type="button" icon="pi pi-search" styleClass="rounded-button ui-button-success ui-button-flat" />
    <p:commandButton type="button" icon="pi pi-user" styleClass="rounded-button ui-button-info ui-button-flat" />
    <p:commandButton type="button" icon="pi pi-bell" styleClass="rounded-button ui-button-warning ui-button-flat" />
    <p:commandButton type="button" icon="pi pi-heart" styleClass="rounded-button ui-button-help ui-button-flat" />
    <p:commandButton type="button" icon="pi pi-times" styleClass="rounded-button ui-button-danger ui-button-flat" />
    <p:commandButton type="button" icon="pi pi-filter" styleClass="rounded-button ui-button-flat ui-button-plain" />

    <h5>Rounded and Outlined Icon Buttons</h5>
    <p:commandButton type="button" icon="pi pi-check" styleClass="rounded-button ui-button-outlined" />
    <p:commandButton type="button" icon="pi pi-bookmark" styleClass="rounded-button ui-button-secondary ui-button-outlined" />
    <p:commandButton type="button" icon="pi pi-search" styleClass="rounded-button ui-button-success ui-button-outlined" />
    <p:commandButton type="button" icon="pi pi-user" styleClass="rounded-button ui-button-info ui-button-outlined" />
    <p:commandButton type="button" icon="pi pi-bell" styleClass="rounded-button ui-button-warning ui-button-outlined" />
    <p:commandButton type="button" icon="pi pi-heart" styleClass="rounded-button ui-button-help ui-button-outlined" />
    <p:commandButton type="button" icon="pi pi-times" styleClass="rounded-button ui-button-danger ui-button-outlined" />

    <h5>Ajax Disabling and Status Icon</h5>
    <h:form>
        <p:commandButton value="Keep Enabled" disableOnAjax="false" action="#{buttonBasicView.sleep()}" />
        <p:commandButton value="Icon Left" icon="pi pi-check" action="#{buttonBasicView.sleep()}" />
        <p:commandButton value="Icon Right" icon="pi pi-check" iconPos="right" action="#{buttonBasicView.sleep()}" />
        <p:commandButton value="Custom" styleClass="custom" action="#{buttonBasicView.sleep()}" />
    </h:form>
    <style>
        html body .custom.ui-button.ui-button-text-only .ui-icon-loading {
            opacity: 0;
        }
        html body .custom.ui-button.ui-button-text-only .ui-icon-loading:before {
            content: "\e94a";
        }
        html body .custom.ui-button, html body .custom.ui-button * {
            transition-property: all;
            transition-duration: .2s;
        }
        html body .custom.ui-button.ui-state-loading {
            opacity: 1;
            background: #888;
            border-color: #888;
        }
        html body .custom.ui-button.ui-state-loading.ui-button-text-only .ui-button-text {
            opacity: 1;
            padding-left: 2rem;
        }
        html body .custom.ui-button.ui-state-loading.ui-button-text-only .ui-icon-loading {
            opacity: 1;
            left: 0;
            margin-left: 0.5rem;
        }
    </style>
</div>


package org.primefaces.showcase.view.button;

import java.io.Serializable;
import java.util.concurrent.TimeUnit;

import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;

@Named("buttonBasicView")
@ViewScoped
public class BasicView implements Serializable {

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

}

Locale

Input Style

Themes

PrimeUIX

PrimeOne

Bootstrap

Material Design

Material Design Compact

Legacy