<apex: commandButton> Component in Visualforce Page

The <apex:commandButton> component is one of the most important components of Visualforce. It is a button rendered as an HTML input element with a type attribute set to submit, reset or image. The value of the HTML's type attribute depends on the <apex:commandButton> tag's specified values.

When the user presses the button, the action defined by the controller executes. Then either the page navigates to a different page or refreshes the current page based on the returned PageReference's variable.

The HTML pass-through attributes are also supported by this component using the "html-" prefix.

This component must always be a child of the <apex:form> component.

The <apex:commandButton> component has the following attributes:

1. accesskey

The accesskey attribute is of type string that is used for specifying the shortcut key that puts the command button in focus.

Syntax:

2. action

The action attribute is of type ApexPages.Action is used to define the action method invoked by the AJAX request to the server. The page simply refreshes when an action is not specified.

Syntax:

3. alt

The alt attribute is of type String that is used for specifying the alternative text description of the command button.

Syntax:

4. dir

The dir attribute is of type String that specifies the direction in which the generated HTML component should be read. LTR and RTL are the two possible values for this attribute.

Syntax:

5. disabled

The disabled attribute is of type Boolean that specifies whether this component should be displayed in the disabled state or not. By default, its value is set to false.

Syntax:

6. id

The id attribute is of type string that allows this component to be referenced by other components on the page.

Syntax:

7. image

The image attribute is of type string that specifies the absolute or relative URL of the image that will be displayed as this button. If we specify this attribute, the generated HTML input element type is set to image.

Syntax:

8. immediate

The immediate attribute is of type Boolean. If its value is true, the action associated with the component will happen immediately. The function will not process the validation rules associated with the fields on the page.

Syntax

9. lang

The lang is of type string used to specify the base language used for the generated HTML output. The values can be "en" or "en-US" etc.

Syntax:

10. onblur

The onblur attribute is of type string used to invoke the JavaScript method when the onblur event occurs or simply focus moves off of the command button.

Syntax:

11. onclick

The onclick attribute is of type string used to invoke the JavaScript method when the onclick event occurs or simply when the user clicks the command button.

Syntax:

12. oncomplete

The oncomplete attribute is of type string that is used to invoke the JavaScript method when the result of an AJAX update request completes on the client

Syntax:

13. ondblclick

The ondblclick attribute is of type string used to invoke the JavaScript method when the ondblclick event occurs or simply when the command button is clicked twice.

Syntax:

14. onfocus

The onfocus attribute is of type string that is used to invoke the JavaScript method when the onfocus event occurs or simply focus on the command button.

Syntax:

15. onkeydown

The onkeydown attribute is of type string that is used to invoke the JavaScript method when the onkeydown event occurs or simply when the user presses a keyboard key.

Syntax:

16. onkeypress

The onkeypress attribute is of type string that is used to invoke the JavaScript method when the onkeypress event occurs or simply when the user holds down or presses a keyboard key.

Syntax:

17. onkeyup

The onkeyup attribute is of type string that is used to invoke the JavaScript method when the onkeyup event occurs or simply when the user releases a keyboard key.

Syntax:

18. onmousedown

The onmousedown attribute is of type string that is used to invoke the JavaScript method when the onmousedown event occurs or simply when the user presses the mouse button.

Syntax:

19. onmousemove

The onmousemove attribute is of type string that is used to invoke the JavaScript method when the onmousemove event occurs or simply when the user moves the mouse pointer.

Syntax:

20. onmouseout

The onmouseout attribute is of type string that is used to invoke the JavaScript method when the onmouseout event occurs or simply when the user moves the mouse pointer away from the command button.

Syntax:

21. onmouseover

The onmouseover attribute is of type string that is used to invoke the JavaScript method when the onmouseover event occurs or simply when the user moves the pointer over the command button.

Syntax:

22. onmouseup

The onmouseup attribute is of type string that is used to invoke the JavaScript method when the onmouseup event occurs or simply when the user releases the mouse button.

Syntax:

23. rendered

The rendered attribute is of type Boolean that is used for specifying whether this component is rendered on the page or not. By default, its value is set to true.

Syntax:

24. reRender

The reRender attribute is of type Object that is Id of one or more components which we need to redraw when the client receives the result of the action method.

Its value can be a single Id, comma-separated Id, or collection of Ids.

Syntax:

25. status

The status attribute is of type string used to specify the ID of an associated component that displays the status of an AJAX update request.

Syntax:

26. style

The style attribute is of type string used to specify the CSS applied to it. Inline CSS is used as a value for this attribute.

Syntax:

27. styleClass

The styleClass attribute is of type string used to specify the external CSS stylesheet applied to it to display the command button.

Syntax:

28. tabindex

The tabindex attribute is of type string used for specifying the order in which this button is selected compared to other page components when the user presses the Tab key repeatedly.

Syntax:

29. timeout

The timeout attribute is of type integer that is used to specify the amount of time before an AJAX update request should time out.

Syntax:

30. title

The title attribute is of type string that is used to specify the text that will be displayed as a tooltip when the mouse hovers this component

Syntax:

31. value

The value attribute is of type string used to specify the text displayed on the commandButton as its label.

Syntax:

Let's take an example to understand how we can use the apex:commandButton component inside the VF page:

ApexCommandButtonExample.vfp

<!-- create apex page with custom controller-->
<apex:page controller="ApexCommandButtonController">
    <!-- use apex form to show the accounts and contacts table-->
    <apex:form >
        <apex:pageBlock title="Account/Contact Information">
            <!-- command button that is responsible for showing accounts in the table-->
            <apex:commandButton action="{!getAccounts}" value="Show Accounts"/>
            
            <!-- command button that is responsible for showing contacts in the table-->
            <apex:commandButton action="{!getContacts}" value="Show Contacts"/>
            
            <apex:pageBlockSection  rendered="{!IF(accounts.size>0, true, false)}">
                <!-- create a table for showing accounts information -->   
                <apex:pageBlockTable value="{!accounts}" var="acc">
                    <apex:column value="{!acc.Name}"/>
                    <apex:column value="{!acc.AccountNumber}"/>
                    <apex:column value="{!acc.Phone}"/>
                    <apex:column value="{!acc.Rating}"/>
                    <apex:column value="{!acc.Website}"/>
                </apex:pageBlockTable>
            </apex:pageBlockSection>
            
            <apex:pageBlockSection  rendered="{!IF(contacts.size>0, true, false)}">
                <!-- create a table for showing contacts information -->   
                <apex:pageBlockTable value="{!contacts}" var="con">
                    <apex:column value="{!con.FirstName}" />
                    <apex:column value="{!con.LastName}"/>
                    <apex:column value="{!con.AccountId}"/>
                    <apex:column value="{!con.Email}"/>
                    <apex:column value="{!con.Phone}"/>
                </apex:pageBlockTable>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

ApexCommandButtonController.apxc

// create ApexCommandButtonController class to get the list of Accounts and Contacts
public class ApexCommandButtonController {
    public List<account> accounts{get;set;}
    public List<contact> contacts{get;set;}
    
    // default constructor
    public ApexCommandButtonController (){
        accounts = new List<account>();
        contacts = new List<contact>();
    }
    
    // create getAccounts() method to get account records 
    public void getAccounts() {
        accounts = [select Id, Name, Rating, Phone, AccountNumber, Website From Account];
    }
    // create getContacts() method to get contact records
    public void getContacts() {
        contacts = [select Id, FirstName, LastName, AccountId, Email, Phone From Contact];
    }
}

Output