Button

Command Button has some convenient improvements over the default JSF commandButton, including AJAX by default, automatic spinner, double submission protection, AJAX event callbacks and attributes for render and execute.

commandButton and commandLink share the same functionality.

Example

Documentation


<h4>Command Buttons</h4>

<t:commandButton value="Save" color="success"/>
<t:commandButton value="Launch" color="warning"/>
<t:commandButton value="Delete" color="alert"/>
<t:commandButton value="Tiny" size="tiny"/>
<t:commandButton value="Hollow" hollow="true"/>

<h4>Command Link in button group</h4>

<ul class="button-group">
    <li><t:commandLink value="One" color="success"/></li>
    <li><t:commandLink value="Two" color="success"/></li>
    <li><t:commandLink value="Three" color="success"/></li>
</ul>

<h4>Command Link in segmented button group</h4>

<ul class="segmented button-group">
    <li class="is-active"><t:commandLink value="One" color="success"/></li>
    <li><t:commandLink value="Two" color="success"/></li>
    <li><t:commandLink value="Three" color="success"/></li>
</ul>

Info

Tag name	commandButton
Component type	io.tornadofaces.component.CommandButton
Renderer type	io.tornadofaces.component.ButtonRenderer

Attributes

Name	Description	Required
action	The action to call when the button is clicked	false
show	Show false will add the class 'is-hidden' to the element so it can be hidden with CSS. Defaults to true.	false
disabled	Boolean indicating the button is disabled. Defaults to false.	false
actionListener	The action listener to call when the button is clicked	false
immediate	Invoke the action in the Apply Request Values phase. Defaults to false.	false
icon	Icon for the button, rendered as i tag with icon class	false
styleClass	Styles to apply to the button	false
style	CSS Styles applied to the button element.	false
title	Title attribute	false
value	Value expression for the value binding	false
size	Size of the button. Valid values are "tiny", "small", "large"	false
spinnerStyle	Determines the spinner animation style. Valid options are "expand-left", "expand-right", "expand-up", "expand-down", "contract", "contract-overlay", "zoom-in", "zoom-out", "slide-left", "slide-right", "slide-up", "slide-down". Defaults to "expand-right".	false
spinnerColor	Determines the color of the spinner. Valid options are any hex code or named CSS color.	false
spinnerSize	pixel dimensions of spinner, defaults to dynamic size based on the button height.	false
hollow	Hollow buttons have outline and no background color. Default false.	false
input	Should this button render as input type="submit" or button type="submit". Defaults to false, which renders a button element.	false
render	Space separated list of components to render after ajax. Default "@form".	false
execute	Space separated list of components to execute on ajax. Default "@form".	false
color	Color of the button. Valid values are "success", "secondary", "alert", "info"	false
beforebegin	JavaScript callback triggered before the AJAX event is assembled. Return false to cancel request.	false
onbegin	JavaScript callback triggered before the AJAX request is sent	false
oncomplete	JavaScript callback triggered after AJAX response has arrived	false
onsuccess	JavaScript callback triggered after DOM update based on AJAX request	false
onerror	JavaScript callback triggered on AJAX error	false
expand	Expand to fill horizontal space	false
rendered	Should this component be rendered?	false

For more advanced styling please consult the Foundation for Apps Documentation.

Button

Command Buttons

Command link as button

Command Link in button group

Command Link in segmented button group

Info

Attributes