- Components
- Button
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>
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
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.