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.

Command Buttons

This page also demonstrates some of the spinnerStyle animations available.

Command link as button

GoContractContract overlay

Command Link in button group

  • One
  • Two
  • Three
  • Four

Command Link in segmented button group

  • One
  • Two
  • Three
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>

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.

Info
Tag name commandButton
Component type io.tornadofaces.component.CommandButton
Renderer type io.tornadofaces.component.ButtonRenderer
Attributes
NameDescriptionRequired
actionThe action to call when the button is clickedfalse
showShow false will add the class 'is-hidden' to the element so it can be hidden with CSS. Defaults to true.false
disabledBoolean indicating the button is disabled. Defaults to false.false
actionListenerThe action listener to call when the button is clickedfalse
immediateInvoke the action in the Apply Request Values phase. Defaults to false.false
iconIcon for the button, rendered as i tag with icon classfalse
styleClassStyles to apply to the buttonfalse
styleCSS Styles applied to the button element.false
titleTitle attributefalse
valueValue expression for the value bindingfalse
sizeSize of the button. Valid values are "tiny", "small", "large"false
spinnerStyleDetermines 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
spinnerColorDetermines the color of the spinner. Valid options are any hex code or named CSS color. false
spinnerSizepixel dimensions of spinner, defaults to dynamic size based on the button height.false
hollowHollow buttons have outline and no background color. Default false.false
inputShould this button render as input type="submit" or button type="submit". Defaults to false, which renders a button element. false
renderSpace separated list of components to render after ajax. Default "@form".false
executeSpace separated list of components to execute on ajax. Default "@form".false
colorColor of the button. Valid values are "success", "secondary", "alert", "info"false
beforebeginJavaScript callback triggered before the AJAX event is assembled. Return false to cancel request.false
onbeginJavaScript callback triggered before the AJAX request is sentfalse
oncompleteJavaScript callback triggered after AJAX response has arrivedfalse
onsuccessJavaScript callback triggered after DOM update based on AJAX requestfalse
onerrorJavaScript callback triggered on AJAX errorfalse
expandExpand to fill horizontal spacefalse
renderedShould this component be rendered?false

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