h:commandButton

HtmlCommandButton is a UICommand component that renders a styleable HTML <input> element. The default type is submit. The component must be a child of h:form in order to trigger the action or actionListener.

Various Styles Usage

The component can be styled with Bootstrap class names as described in the Alloy Base CSS documentation.

Source Code

  1. <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html"
  2. 	xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
  3.  
  4. 	<h:form>
  5. 		<p>
  6. 			<h:commandButton styleClass="btn btn-primary" value="#{i18n['primary']}" />
  7. 			<h:commandButton styleClass="btn btn-info" value="#{i18n['info']}" />
  8. 			<h:commandButton styleClass="btn btn-success" value="#{i18n['success']}" />
  9. 			<h:commandButton styleClass="btn btn-warning" value="#{i18n['warning']}" />
  10. 			<h:commandButton styleClass="btn btn-danger" value=" #{i18n['danger']}" />
  11. 			<h:commandButton styleClass="btn btn-link" value="#{i18n['link']}" />
  12. 		</p>
  13.  
  14. 		<!-- Abbreviated CSS classes are Bootstrap 3 classes. For example: btn-lg -->
  15. 		<!-- Full CSS classes are Bootstrap 2 classes. For example: btn-large -->
  16. 		<p>
  17. 			<h:commandButton styleClass="btn btn-primary btn-large btn-lg" value="#{i18n['large']}" />
  18. 			<h:commandButton styleClass="btn btn-large btn-lg" value="#{i18n['large']}" />
  19. 		</p>
  20.  
  21. 		<p>
  22. 			<h:commandButton styleClass="btn btn-primary" value="#{i18n['default']}" />
  23. 			<h:commandButton styleClass="btn" value="#{i18n['default']}" />
  24. 		</p>
  25.  
  26. 		<p>
  27. 			<h:commandButton styleClass="btn btn-primary btn-small btn-sm" value="#{i18n['small']}" />
  28. 			<h:commandButton styleClass="btn btn-small btn-sm" value="#{i18n['small']}" />
  29. 		</p>
  30.  
  31. 		<p>
  32. 			<h:commandButton styleClass="btn btn-primary btn-mini btn-xs" value="#{i18n['mini']}" />
  33. 			<h:commandButton styleClass="btn btn-mini btn-xs" value="#{i18n['mini']}" />
  34. 		</p>
  35.  
  36. 		<p>
  37. 			<h:commandButton disabled="true" styleClass="btn btn-primary disabled" value="#{i18n['disabled']}" />
  38. 			<h:commandButton disabled="true" styleClass="btn disabled" value="#{i18n['disabled']}" />
  39. 		</p>
  40.  
  41. 		<p>
  42. 			<h:commandButton styleClass="btn btn-primary btn-block" value="#{i18n['block']}" />
  43. 			<h:commandButton styleClass="btn btn-block" value="#{i18n['block']}" />
  44. 		</p>
  45. 	</h:form>
  46.  
  47. </ui:composition>
Liferay Faces Bridge Implementation 5.0.0 + Showcase Common 3.1.1 + Liferay Faces Util 3.4.1 + Mojarra 2.2.20