h:button

HtmlOutcomeTargetButton is a UIOutput component that renders a styleable HTML <input> element. The default type is button. The component does not need to be a child of h:form since the outcome attribute is designed to navigate via HTTP GET.

Various Styles Usage

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

Source Code

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

	<p>
		<h:button includeViewParams="true" styleClass="btn btn-primary" value="#{i18n['primary']}" />
		<h:button includeViewParams="true" styleClass="btn btn-info" value="#{i18n['info']}" />
		<h:button includeViewParams="true" styleClass="btn btn-success" value="#{i18n['success']}" />
		<h:button includeViewParams="true" styleClass="btn btn-warning" value="#{i18n['warning']}" />
		<h:button includeViewParams="true" styleClass="btn btn-danger" value=" #{i18n['danger']}" />
		<h:button includeViewParams="true" styleClass="btn btn-link" value="#{i18n['link']}" />
	</p>

	<!-- Abbreviated CSS classes are Bootstrap 3 classes. For example: btn-lg -->
	<!-- Full CSS classes are Bootstrap 2 classes. For example: btn-large -->
	<p>
		<h:button includeViewParams="true" styleClass="btn btn-primary btn-large btn-lg" value="#{i18n['large']}" />
		<h:button includeViewParams="true" styleClass="btn btn-large btn-lg" value="#{i18n['large']}" />
	</p>

	<p>
		<h:button includeViewParams="true" styleClass="btn btn-primary" value="#{i18n['default']}" />
		<h:button includeViewParams="true" styleClass="btn" value="#{i18n['default']}" />
	</p>

	<p>
		<h:button includeViewParams="true" styleClass="btn btn-primary btn-small btn-sm" value="#{i18n['small']}" />
		<h:button includeViewParams="true" styleClass="btn btn-small btn-sm" value="#{i18n['small']}" />
	</p>

	<p>
		<h:button includeViewParams="true" styleClass="btn btn-primary btn-mini btn-xs" value="#{i18n['mini']}" />
		<h:button includeViewParams="true" styleClass="btn btn-mini btn-xs" value="#{i18n['mini']}" />
	</p>

	<p>
		<h:button includeViewParams="true" disabled="true" styleClass="btn btn-primary disabled" value="#{i18n['disabled']}" />
		<h:button includeViewParams="true" disabled="true" styleClass="btn disabled" value="#{i18n['disabled']}" />
	</p>

	<p>
		<h:button includeViewParams="true" styleClass="btn btn-primary btn-block" value="#{i18n['block']}" />
		<h:button includeViewParams="true" styleClass="btn btn-block" value="#{i18n['block']}" />
	</p>

</ui:composition>
Liferay Faces Bridge Implementation 5.0.0 + Showcase Common 3.1.1 + Liferay Faces Util 3.4.1 + Mojarra 2.2.20