<b:button>extends the standard JSF h:button component.
Button styles can be applied to anything with the look attribute:
| b:button | look attribute |
Description |
|---|---|---|
| missing | Standard gray button with gradient | |
look="primary" |
Provides extra visual weight and identifies the primary action in a set of buttons | |
look="info" |
Used as an alternative to the default styles | |
look="success" |
Indicates a successful or positive action | |
look="warning" |
Indicates caution should be taken with this action | |
look="danger" |
Indicates a dangerous or potentially negative action | |
look="link" |
Alternate dark gray button, not tied to a semantic action or use |
Fancy larger or smaller buttons? Add size="lg" (Large), size="sm" (Small), or size="xs" for additional sizes.
Buttons can can have an icon adding the attribute icon (on the left or right, default is left).
You can control the icon position by specifying it in the attribute iconAlign.
The Icon attribute will add a Glyphicon icon (Bootstrap's default), but now you can also use a Font Awesome icon using the iconAwesome attribute instead of icon.
Both icon and iconAwesome attributes, require the icon name as value the icon name without the trailing glyphicon- prefix and fa- prefix respectively.
| Default(Glyphicons) | Font Awesome |
Both Fontawesome icons and Glyphicons can be decorated with modifiers:
Make buttons look unclickable by fading them by 50%.
Just like h:button, <b:button> does GET requests targeting bookmarkable URLs.
If you don't want to trigger a navigation, but simply call an AJAX or JavaScript method, omit the outcome.
You can make your intention more explicit by writing outcome="@none".
href and targetSince 1.1.0You can also use <b:button /> with the attributes href
and / or target. Both attributes are not supported by traditional HTML buttons.
Hence, they are rendered as an HTML anchor tag.
AJAX isn't supported because <b:button /> doesn't send POST requests to the server. If you need
to communicate with the server (with or without AJAX), use <b:commandButton/>
or <b:remoteCommand />.
You can use all the attributes controlling the responsive behaviour of <b:column />
also with <b:button />. Note that this is equivalent to putting it into a
<b:column />. In particular, the the CSS styles are inside the column div.
Breaking change with version 1.1.0: Until BootsFaces 1.0.2, the generated HTML code
didn't comply to the rules of Bootstrap. This approach worked, but the buttons bleed into the padding
of their container. In other words, the buttons were to wide. BootsFaces 1.1.0 fixes this. If your CSS
rules use the id of the button, you might have to modify the selector of the rule to #id > button.
You can play also with col-*-*, visible and hidden attribute, as any bootstrap elements. For example:
| Attribute | Default value | Description |
|---|---|---|
| accesskey | (none) | Access key to transfer focus to the input element. |
| auto-update autoUpdate (alternative writing) |
false | Setting this flag updates the widget on every AJAX request. |
| binding | (none) | An EL expression referring to a server side UIComponent instance in a backing bean. |
| col-lg colLg (alternative writing) |
-1 | Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| col-md colMd (alternative writing) |
-1 | Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| col-sm colSm (alternative writing) |
-1 | Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| col-xs colXs (alternative writing) |
-1 | Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| dir | (none) | Direction indication for text that does not inherit directionality. Legal values: ltr (Default. Left-to-right text direction), rtl (Right-to-left text direction) and auto (let the browser figure out the direction of your alphabet, based on the page content). |
| disabled | false | Boolean value to specify if the button is disabled. |
| dismiss | (none) | This attribute is mapped to the HTML5 data-dismiss custom attribute. |
| display | block | If you use the "visible" attribute, the value of this attribute is added. Legal values: block, inline, inline-block. Default: block. |
| fragment | (none) | The fragment that is to be appended to the target URL. The # separator is applied automatically and needs not be included. |
| hidden | (none) | This column is hidden on a certain screen size and below. Legal values: lg, md, sm, xs. |
| href | (none) | Specifies the URL of the page the link goes to. |
| icon | (none) | Button Icon, can be one of the Bootstrap icon names. Alignment can be specified with icon-align attribute. |
| icon-align iconAlign (alternative writing) |
(none) | Alignment can be right or left. |
| icon-awesome iconAwesome (alternative writing) |
(none) | Font Awesome Icon to show in this Button, can be one of the Font Awesome icon names. Alignment can be specified with the icon-align attribute. |
| icon-brand iconBrand (alternative writing) |
false | Use the free brand font of FontAwesome 5. As a side effect, every FontAwesome icon on the same page is switched to FontAwesome 5.2.0. By default, the icon set is the older version 4.7.0. |
| icon-flip iconFlip (alternative writing) |
(none) | Flip the icon: can be H (horizontal) or V (vertical). |
| icon-inverse iconInverse (alternative writing) |
false | Switch the icon from black-on-white to white-on-black. |
| icon-light iconLight (alternative writing) |
false | Use the paid 'light' font of FontAwesome 5. As a side effect, every FontAwesome icon on the same page is switched to FontAwesome 5.2.0. By default, the icon set is the older version 4.7.0. |
| icon-pulse iconPulse (alternative writing) |
false | Boolean value: if true the icon will rotate with 8 discrete steps. |
| icon-regular iconRegular (alternative writing) |
false | Use the paid 'regular' font of FontAwesome 5. As a side effect, every FontAwesome icon on the same page is switched to FontAwesome 5.2.0. By default, the icon set is the older version 4.7.0. |
| icon-rotate iconRotate (alternative writing) |
(none) | Rotate 90 degrees the icon: Can be L,R. |
| icon-size iconSize (alternative writing) |
(none) | Icon Size: legal values are lg (=133%), 2x, 3x, 4x, 5x. If you're using Fontawesome 5, also 6x, 7x, 8x, 9, 10x, xs (=75%), and sm (=87.5%) are allowed. |
| icon-solid iconSolid (alternative writing) |
false | Use the free font of FontAwesome 5. As a side effect, every FontAwesome icon on the same page is switched to FontAwesome 5.2.0. By default, the icon set is the older version 4.7.0. |
| icon-spin iconSpin (alternative writing) |
false | Boolean value: if true the icon will spin. |
| id | (none) | Unique identifier of the component in a namingContainer. |
| lang | (none) | Code describing the language used in the generated markup for this component. |
| large-screen largeScreen (alternative writing) |
-1 | Alternative spelling to col-lg. Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| look | (none) | Look of the Button, can be primary, block, info, success, warning, important, error, inverse. If not specified, Standard gray button with gradient is rendered. |
| medium-screen mediumScreen (alternative writing) |
-1 | Alternative spelling to col-md. Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| offset | (none) | Integer value to specify how many columns to offset. |
| offset-lg offsetLg (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| offset-md offsetMd (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| offset-sm offsetSm (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| offset-xs offsetXs (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| onblur | (none) | Client side callback to execute when input element loses focus. |
| onchange | (none) | Client side callback to execute when input element loses focus and its value has been modified since gaining focus. |
| onclick | (none) | The onclick attribute. |
| ondblclick | (none) | Client side callback to execute when input element is double clicked. |
| onfocus | (none) | Client side callback to execute when input element receives focus. |
| onkeydown | (none) | Client side callback to execute when a key is pressed down over input element. |
| onkeypress | (none) | Client side callback to execute when a key is pressed and released over input element. |
| onkeyup | (none) | Client side callback to execute when a key is released over input element. |
| onmousedown | (none) | Client side callback to execute when a pointer input element is pressed down over input element. |
| onmousemove | (none) | Client side callback to execute when a pointer input element is moved within input element. |
| onmouseout | (none) | Client side callback to execute when a pointer input element is moved away from input element. |
| onmouseover | (none) | Client side callback to execute when a pointer input element is moved onto input element. |
| onmouseup | (none) | Client side callback to execute when a pointer input element is released over input element. |
| outcome | (none) | The outcome to navigate to. |
| rendered | false | Boolean value to specify the rendering of the component, when set to false the component will not be rendered. |
| size | (none) | Size of the button, can be large ('lg'), small ('sm'), or tiny ('xs'). If not specified, standard size button is rendered. |
| small-screen smallScreen (alternative writing) |
-1 | Alternative spelling to col-sm. Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| span | (none) | Integer value to specify how many columns to span on medium screens (≥992 pixels). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| style | (none) | Inline style of the input element. |
| style-class styleClass (alternative writing) |
(none) | Style class of this element. |
| tabindex | (none) | Position of this element in the tabbing order for the current document. This value must be an integer between 0 and 32767. |
| target | (none) | Optional target of the HTML anchor tag that's rendered. E.g. # opens the link in a new tab. This attribute is only evaluated if you provide an href. |
| tiny-screen tinyScreen (alternative writing) |
-1 | Alternative spelling to col-xs. Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| title | (none) | Advisory tooltip information. |
| tooltip | (none) | The text of the tooltip. |
| tooltip-container tooltipContainer (alternative writing) |
body | Where is the tooltip div generated? That's primarily a technical value that can be used to fix rendering errors in special cases. Also see data-container in the documentation of Bootstrap. The default value is body. |
| tooltip-delay tooltipDelay (alternative writing) |
0 | The tooltip is shown and hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-delay-hide tooltipDelayHide (alternative writing) |
0 | The tooltip is hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-delay-show tooltipDelayShow (alternative writing) |
0 | The tooltip is shown with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-position tooltipPosition (alternative writing) |
(none) | Where is the tooltip to be displayed? Possible values: "top", "bottom", "right", "left", "auto", "auto top", "auto bottom", "auto right" and "auto left". Default to "bottom". |
| value | (none) | Optional button caption. |
| visible | (none) | This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs. |