These classes are mostly equals to <b:navLink /> and <b:navCommandLink />.
The difference is the different semantics. Links can be used anywhere. If you set the attribute `look`,
the link is displayed as a button.
| Attribute | Default value | Description |
|---|---|---|
| action | (none) | The button action, this can be method expression or a string outcome. |
| action-listener actionListener (alternative writing) |
(none) | A method expression that refers to a method with this signature: void methodName(Action-Event). |
| active | false | Adds the active state to the link. |
| ajax | false | Whether the Button submits the form with AJAX. |
| 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. |
| content-class contentClass (alternative writing) |
(none) | content-class is optional: if specified, the content (i.e. the anchor tag) will be displayed with this specific class |
| content-style contentStyle (alternative writing) |
(none) | Inline style of the content area (i.e the anchor tag). |
| delay | (none) | Delays the AJAX request. |
| disabled | false | Boolean value to specify if the button is disabled. |
| 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. |
| header | (none) | If present, this element is rendered as Header in a menu with the text specified by this attribute value: all other attributes will be ignored. |
| 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) | Navigation Link Icon, can be one of the Bootstrap's Glyphicons icon names. Alignment can be specified with the icon-align attribute. |
| icon-align iconAlign (alternative writing) |
(none) | Alignment can be right or left. |
| icon-awesome iconAwesome (alternative writing) |
(none) | Navigation Link Font Awesome Icon, 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. |
| immediate | false | Flag indicating that, if this component is activated by the user, notifications should be delivered to interested listeners and actions immediately (that is, during Apply Request Values phase) rather than waiting until Invoke Application phase. Default is false. |
| include-view-params includeViewParams (alternative writing) |
false | Set whether or not the page parameters should be encoded into the target url. |
| 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) | Make the link look like a button. Can be primary, block, info, success, warning, important, danger, and default. If not specified, a standard HTML hyperlink 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. |
| oncomplete | (none) | JavaScript to be executed when ajax completes. |
| ondblclick | (none) | Client side callback to execute when input element is double clicked. |
| onerror | (none) | JavaScript to be executed when ajax results on an error (including both network errors and Java exceptions). |
| 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. |
| onselect | (none) | Client side callback to execute when text within input element is selected by user. |
| onsuccess | (none) | JavaScript to be executed when ajax completes with success (i.e. there's neither a network error nor a Java exception). |
| outcome | (none) | The outcome to navigate to. |
| process | (none) | Comma or space separated list of ids or search expressions denoting which values are to be sent to the server. |
| rendered | false | Boolean value to specify the rendering of the component, when set to false the component will not be 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 |
| style-class styleClass (alternative writing) |
(none) | CSS style class |
| tabindex | 0 | Position of this element in the tabbing order for the current document. This value must be an integer between -1 and 32767. By default, Bootstrap uses 0, which means the tab order is relative to the position of the element in the document. |
| 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. |
| 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". |
| update | (none) | Component(s) to be updated with ajax. |
| value | (none) | Navigation Link text. |
| visible | (none) | This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs. |
| Attribute | Default value | Description |
|---|---|---|
| action | (none) | The button action, this can be method expression or a string outcome. |
| action-listener actionListener (alternative writing) |
(none) | A method expression that refers to a method with this signature: void methodName(Action-Event). |
| active | false | Adds the active state to the link. |
| ajax | false | Whether the Button submits the form with AJAX. |
| 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. |
| content-class contentClass (alternative writing) |
(none) | content-class is optional: if specified, the content (i.e. the anchor tag) will be displayed with this specific class |
| content-style contentStyle (alternative writing) |
(none) | Inline style of the content area (i.e the anchor tag). |
| delay | (none) | Delays the AJAX request. |
| disabled | false | Boolean value to specify if the button is disabled. |
| 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. |
| header | (none) | If present, this element is rendered as Header in a menu with the text specified by this attribute value: all other attributes will be ignored. |
| 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) | Navigation Link Icon, can be one of the Bootstrap's Glyphicons icon names. Alignment can be specified with the icon-align attribute. |
| icon-align iconAlign (alternative writing) |
(none) | Alignment can be right or left. |
| icon-awesome iconAwesome (alternative writing) |
(none) | Navigation Link Font Awesome Icon, 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. |
| immediate | false | Flag indicating that, if this component is activated by the user, notifications should be delivered to interested listeners and actions immediately (that is, during Apply Request Values phase) rather than waiting until Invoke Application phase. Default is false. |
| include-view-params includeViewParams (alternative writing) |
false | Set whether or not the page parameters should be encoded into the target url. |
| 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) | Make the link look like a button. Can be primary, block, info, success, warning, important, danger, and default. If not specified, a standard HTML hyperlink 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. |
| oncomplete | (none) | JavaScript to be executed when ajax completes. |
| ondblclick | (none) | Client side callback to execute when input element is double clicked. |
| onerror | (none) | JavaScript to be executed when ajax results on an error (including both network errors and Java exceptions). |
| 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. |
| onselect | (none) | Client side callback to execute when text within input element is selected by user. |
| onsuccess | (none) | JavaScript to be executed when ajax completes with success (i.e. there's neither a network error nor a Java exception). |
| outcome | (none) | The outcome to navigate to. |
| process | (none) | Comma or space separated list of ids or search expressions denoting which values are to be sent to the server. |
| rendered | false | Boolean value to specify the rendering of the component, when set to false the component will not be 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 |
| style-class styleClass (alternative writing) |
(none) | CSS style class |
| tabindex | 0 | Position of this element in the tabbing order for the current document. This value must be an integer between -1 and 32767. By default, Bootstrap uses 0, which means the tab order is relative to the position of the element in the document. |
| 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. |
| 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". |
| update | (none) | Component(s) to be updated with ajax. |
| value | (none) | Navigation Link text. |
| visible | (none) | This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs. |
A <b:commandButton /> is rendered as an HMTL <button /> bearing the CSS class btn.
Depending on the value of the look attribute, the button also bears one of the CSS classes btn-primary,
btn-block,
btn-info,
btn-success,
btn-warning,
btn-important or
btn-danger.