title: How to create a button in JSF page with custom label
body: <p>I have this simple JSF button:</p>
  
  <pre><code>//Question Dialog
  function deletedialog(button, a){      
      $("&lt;div /&gt;", {
          text: a
      }).dialog({        
          width: 600,
          buttons: {
              "Ok": function() { 
                  $("#form\\:deleterow").click();
                  //  $('input[id$="deleterow"]').click();               
                  $(this).dialog("close");
                  button.value = "Processing...";
                  button.disabled = true;                  
              }, 
              "Cancel": function(event) { 
                  $(this).dialog("close");
                  event.preventDefault();
                  button.value = "Delete";
                  button.disabled = false;
              } 
          }
      });         
  }
  
  
                      &lt;!-- hidden button --&gt;
                      &lt;h:commandButton id="deleterow" value="HiddenDelete" action="#{AccountsController.deleteSelectedIDs}" style="display:none"&gt;
                          &lt;f:ajax render="@form"&gt;&lt;/f:ajax&gt;
                      &lt;/h:commandButton&gt;
                      &lt;!-- the delete button --&gt;
                      &lt;h:button onclick="deletedialog(this, 'Do you want to delete the selected rows?'); return false;" &gt;
                          &lt;h:graphicImage name="small-hover.png" library="images" title="Delete" /&gt;
                      &lt;/h:button&gt;    
  </code></pre>
  
  <p>I want to create png image which will be the visual body of the button. The only thing that I will change will be the title of the button which I will set every time using the <code>value</code> attribute of the button. Is this possible? Now when I load the JSF page I see only empty button without label.</p>
  
  <p>P.S 1 I get this result:</p>
  
  <p><img src="https://i.stack.imgur.com/90OjK.png" alt="enter image description here"></p>