@rio-cloud/uikit-mcp 1.1.4 → 1.1.6

package/dist/docs/components/button.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Interaction
-*Source:* https://uikit.developers.rio.cloud/#components/button
-*Captured:* 2026-01-14T09:07:00.083Z
+*Source:* https://uikit.developers.rio.cloud/#/components/button
+*Captured:* 2026-02-23T13:41:39.366Z
 
 The button component is the React equivalent to the normal HTML button with some To check out the HTML version click here: Buttons
 
@@ -251,31 +251,74 @@ export default () => (
 </div>
 ```
 
-#### Props
+#### Props: Base button props
+
+### Base button props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| disabled | boolean | false | Whether the button should be disabled. |
+| active | boolean | false | Set the button toggled. Should be used in combination with "asToggle" prop. |
+| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |
+| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |
+| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |
+| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |
+| block | boolean | false | Defines whether the button takes up the full width of the parent element. |
+| bsStyle | BUTTON_STYLE | 'default' | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
+| bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
+| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
+| noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
+| tabIndex | number | 0 | Number of the index used for keyboard support. |
+| className | string | — | Additional classes to be set on the button element. |
+
+#### Props: Regular button
+
+### Regular button
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| bsStyle |  | — | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
-| bsSize |  | — | Sets the button size. Possible values are: xs, sm, md and lg |
-| variant |  | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
+| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
+| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | — | Callback function triggered when clicking the button. |
+| type | 'button' \| 'submit | 'button' | Defines the type of the button. This may be used for form submit buttons. |
 
-### Example: Link buttons
+#### Props: ToggleButton
+
+### ToggleButton
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
+| onClick | (value: boolean) => void | — | Callback function triggered when clicking the button. |
 
-Link buttons
+#### Props: Link element buttons
+
+### Link element buttons
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| as | 'a' | — | Defines this component as a link element. |
+| type | never | — | Native button type is not supported when using as="a". |
+| href | string | — | Defines the destination URL for the link button. |
+| asToggle | false | false | Toggle behavior is not supported when using as="a". |
+| onClick | (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | — | Callback function triggered when clicking the link. |
+
+### Example: Buttons with link styles
+
+Buttons with link styles
 PrimarySuccessInfoWarningDanger
-Link inline buttons
+Button with link styles - inline
 
 This is an example for an Inline link button.
-Note Link buttons can also be used within text blocks by setting the variant type to Button.VARIANT_LINK_INLINE.
+Note Link styled buttons can also be used within text blocks by setting the variant type to Button.VARIANT_LINK_INLINE.
 
 #### Summary
 
-Link buttons
+Buttons with link styles
 PrimarySuccessInfoWarningDanger
-Link inline buttons
+Button with link styles - inline
 
 This is an example for an Inline link button.
-Note Link buttons can also be used within text blocks by setting the variant type to Button.VARIANT_LINK_INLINE.
+Note Link styled buttons can also be used within text blocks by setting the variant type to Button.VARIANT_LINK_INLINE.
 
 #### React (tsx)
 
@@ -286,7 +329,7 @@ import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
 
 export default () => (
     <div>
-        <FormLabel>Link buttons</FormLabel>
+        <FormLabel>Buttons with link styles</FormLabel>
         <ButtonToolbar>
             <Button bsStyle={Button.PRIMARY} variant={Button.VARIANT_LINK} iconName='rioglyph-heart'>
                 Primary
@@ -305,7 +348,7 @@ export default () => (
             </Button>
         </ButtonToolbar>
         <div>
-            <FormLabel className='margin-top-25'>Link inline buttons</FormLabel>
+            <FormLabel className='margin-top-25'>Button with link styles - inline</FormLabel>
         </div>
         <div className='display-inline-flex gap-4'>
             This is an example for an{' '}
@@ -315,8 +358,9 @@ export default () => (
             button.
         </div>
         <p className='margin-top-25'>
-            <span className='label label-info label-condensed margin-right-5'>Note</span> Link buttons can also be used
-            within text blocks by setting the variant type to <code className='code'>Button.VARIANT_LINK_INLINE</code>.
+            <span className='label label-info label-condensed margin-right-5'>Note</span> Link styled buttons can also
+            be used within text blocks by setting the variant type to{' '}
+            <code className='code'>Button.VARIANT_LINK_INLINE</code>.
         </p>
     </div>
 );
@@ -326,7 +370,7 @@ export default () => (
 
 ```html
 <div data-capture-callout="true">
-    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Link buttons</div>
+    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Buttons with link styles</div>
     <div class="btn-toolbar">
         <button type="button" class="btn btn-primary btn-link btn-component" tabindex="0">
             <span class="rioglyph rioglyph-heart">
@@ -345,24 +389,67 @@ export default () => (
             </span>Danger</button>
     </div>
     <div>
-        <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-25">Link inline buttons</div>
+        <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-25">Button with link styles - inline</div>
     </div>
     <div class="display-inline-flex gap-4">This is an example for an <button type="button" class="btn btn-primary btn-link btn-link-inline btn-component" tabindex="0">
             <span class="rioglyph rioglyph-new-window">
             </span>Inline link</button> button.</div>
     <p class="margin-top-25">
-        <span class="label label-info label-condensed margin-right-5">Note</span> Link buttons can also be used within text blocks by setting the variant type to <code class="code">Button.VARIANT_LINK_INLINE</code>.
+        <span class="label label-info label-condensed margin-right-5">Note</span> Link styled buttons can also be used within text blocks by setting the variant type to <code class="code">Button.VARIANT_LINK_INLINE</code>.
     </p>
 </div>
 ```
 
-#### Props
+#### Props: Base button props
+
+### Base button props
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| bsStyle |  | — | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
-| bsSize |  | — | Sets the button size. Possible values are: xs, sm, md and lg |
-| variant |  | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
+| disabled | boolean | false | Whether the button should be disabled. |
+| active | boolean | false | Set the button toggled. Should be used in combination with "asToggle" prop. |
+| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |
+| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |
+| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |
+| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |
+| block | boolean | false | Defines whether the button takes up the full width of the parent element. |
+| bsStyle | BUTTON_STYLE | 'default' | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
+| bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
+| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
+| noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
+| tabIndex | number | 0 | Number of the index used for keyboard support. |
+| className | string | — | Additional classes to be set on the button element. |
+
+#### Props: Regular button
+
+### Regular button
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
+| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | — | Callback function triggered when clicking the button. |
+| type | 'button' \| 'submit | 'button' | Defines the type of the button. This may be used for form submit buttons. |
+
+#### Props: ToggleButton
+
+### ToggleButton
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
+| onClick | (value: boolean) => void | — | Callback function triggered when clicking the button. |
+
+#### Props: Link element buttons
+
+### Link element buttons
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| as | 'a' | — | Defines this component as a link element. |
+| type | never | — | Native button type is not supported when using as="a". |
+| href | string | — | Defines the destination URL for the link button. |
+| asToggle | false | false | Toggle behavior is not supported when using as="a". |
+| onClick | (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | — | Callback function triggered when clicking the link. |
 
 ### Example: Button group
 
@@ -509,13 +596,56 @@ export default () => (
 </div>
 ```
 
-#### Props
+#### Props: Base button props
+
+### Base button props
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| bsStyle |  | — | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
-| bsSize |  | — | Sets the button size. Possible values are: xs, sm, md and lg |
-| variant |  | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
+| disabled | boolean | false | Whether the button should be disabled. |
+| active | boolean | false | Set the button toggled. Should be used in combination with "asToggle" prop. |
+| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |
+| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |
+| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |
+| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |
+| block | boolean | false | Defines whether the button takes up the full width of the parent element. |
+| bsStyle | BUTTON_STYLE | 'default' | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
+| bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
+| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
+| noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
+| tabIndex | number | 0 | Number of the index used for keyboard support. |
+| className | string | — | Additional classes to be set on the button element. |
+
+#### Props: Regular button
+
+### Regular button
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
+| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | — | Callback function triggered when clicking the button. |
+| type | 'button' \| 'submit | 'button' | Defines the type of the button. This may be used for form submit buttons. |
+
+#### Props: ToggleButton
+
+### ToggleButton
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
+| onClick | (value: boolean) => void | — | Callback function triggered when clicking the button. |
+
+#### Props: Link element buttons
+
+### Link element buttons
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| as | 'a' | — | Defines this component as a link element. |
+| type | never | — | Native button type is not supported when using as="a". |
+| href | string | — | Defines the destination URL for the link button. |
+| asToggle | false | false | Toggle behavior is not supported when using as="a". |
+| onClick | (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | — | Callback function triggered when clicking the link. |
 
 ### Example: Outlined buttons (transparent)
 
@@ -601,13 +731,353 @@ export default () => (
 </div>
 ```
 
-#### Props
+#### Props: Base button props
+
+### Base button props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| disabled | boolean | false | Whether the button should be disabled. |
+| active | boolean | false | Set the button toggled. Should be used in combination with "asToggle" prop. |
+| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |
+| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |
+| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |
+| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |
+| block | boolean | false | Defines whether the button takes up the full width of the parent element. |
+| bsStyle | BUTTON_STYLE | 'default' | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
+| bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
+| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
+| noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
+| tabIndex | number | 0 | Number of the index used for keyboard support. |
+| className | string | — | Additional classes to be set on the button element. |
+
+#### Props: Regular button
+
+### Regular button
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
+| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | — | Callback function triggered when clicking the button. |
+| type | 'button' \| 'submit | 'button' | Defines the type of the button. This may be used for form submit buttons. |
+
+#### Props: ToggleButton
+
+### ToggleButton
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
+| onClick | (value: boolean) => void | — | Callback function triggered when clicking the button. |
+
+#### Props: Link element buttons
+
+### Link element buttons
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| as | 'a' | — | Defines this component as a link element. |
+| type | never | — | Native button type is not supported when using as="a". |
+| href | string | — | Defines the destination URL for the link button. |
+| asToggle | false | false | Toggle behavior is not supported when using as="a". |
+| onClick | (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | — | Callback function triggered when clicking the link. |
+
+### Example: Buttons as anchor element
+
+Buttons as anchor element
+DefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted
+Buttons as anchor element - disabled
+DefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted
+Buttons as anchor element - various sizes
+Extra SmallSmallMediumLarge
+Buttons as anchor element - icon only
+
+#### Summary
+
+Buttons as anchor element
+DefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted
+Buttons as anchor element - disabled
+DefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted
+Buttons as anchor element - various sizes
+Extra SmallSmallMediumLarge
+Buttons as anchor element - icon only
+
+#### React (tsx)
+
+```tsx
+import Button from '@rio-cloud/rio-uikit/Button';
+import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';
+import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
+
+export default () => (
+    <div>
+        <FormLabel>Buttons as anchor element</FormLabel>
+        <ButtonToolbar>
+            <Button as='a' href='#' iconName='rioglyph-truck'>
+                Default
+            </Button>
+            <Button as='a' href='#' bsStyle={Button.PRIMARY} iconName='rioglyph-heart'>
+                Primary
+            </Button>
+            <Button as='a' href='#' bsStyle={Button.SECONDARY} iconName='rioglyph-poi'>
+                Secondary
+            </Button>
+            <Button as='a' href='#' bsStyle={Button.SUCCESS} iconName='rioglyph-thumbs-up'>
+                Success
+            </Button>
+            <Button as='a' href='#' bsStyle={Button.INFO} iconName='rioglyph-info-sign'>
+                Info
+            </Button>
+            <Button as='a' href='#' bsStyle={Button.WARNING} iconName='rioglyph-warning-sign'>
+                Warning
+            </Button>
+            <Button as='a' href='#' bsStyle={Button.DANGER} iconName='rioglyph-error-sign'>
+                Danger
+            </Button>
+            <Button as='a' href='#' bsStyle={Button.MUTED_FILLED} iconName='rioglyph-cog'>
+                Muted filled
+            </Button>
+            <Button as='a' href='#' bsStyle={Button.MUTED} iconName='rioglyph-heart'>
+                Muted
+            </Button>
+        </ButtonToolbar>
+
+        <FormLabel className='margin-top-15'>Buttons as anchor element - disabled</FormLabel>
+        <ButtonToolbar>
+            <Button as='a' href='#' disabled iconName='rioglyph-truck'>
+                Default
+            </Button>
+            <Button as='a' href='#' bsStyle={Button.PRIMARY} disabled iconName='rioglyph-heart'>
+                Primary
+            </Button>
+            <Button as='a' href='#' bsStyle={Button.SECONDARY} disabled iconName='rioglyph-poi'>
+                Secondary
+            </Button>
+            <Button as='a' href='#' bsStyle={Button.SUCCESS} disabled iconName='rioglyph-thumbs-up'>
+                Success
+            </Button>
+            <Button as='a' href='#' bsStyle={Button.INFO} disabled iconName='rioglyph-info-sign'>
+                Info
+            </Button>
+            <Button as='a' href='#' bsStyle={Button.WARNING} disabled iconName='rioglyph-warning-sign'>
+                Warning
+            </Button>
+            <Button as='a' href='#' bsStyle={Button.DANGER} disabled iconName='rioglyph-error-sign'>
+                Danger
+            </Button>
+            <Button as='a' href='#' bsStyle={Button.MUTED_FILLED} disabled iconName='rioglyph-cog'>
+                Muted filled
+            </Button>
+            <Button as='a' href='#' bsStyle={Button.MUTED} disabled iconName='rioglyph-heart'>
+                Muted
+            </Button>
+        </ButtonToolbar>
+
+        <FormLabel className='margin-top-15'>Buttons as anchor element - various sizes</FormLabel>
+        <ButtonToolbar>
+            <Button as='a' href='#' bsSize={Button.XS} iconName='rioglyph-truck'>
+                Extra Small
+            </Button>
+            <Button as='a' href='#' bsStyle={Button.PRIMARY} bsSize={Button.SM} iconName='rioglyph-heart'>
+                Small
+            </Button>
+            <Button as='a' href='#' bsStyle={Button.SUCCESS} bsSize={Button.MD} iconName='rioglyph-thumbs-up'>
+                Medium
+            </Button>
+            <Button
+                as='a'
+                href='#'
+                bsStyle={Button.INFO}
+                bsSize={Button.LG}
+                onClick={() => console.log('button clicked')}
+                iconName='rioglyph-info-sign'
+            >
+                Large
+            </Button>
+        </ButtonToolbar>
+
+        <FormLabel className='margin-top-15'>Buttons as anchor element - icon only</FormLabel>
+        <ButtonToolbar>
+            <Button as='a' href='#' iconOnly iconName='rioglyph-truck' />
+            <Button as='a' href='#' bsStyle={Button.PRIMARY} iconOnly iconName='rioglyph-heart' />
+            <Button as='a' href='#' bsStyle={Button.SUCCESS} iconOnly iconName='rioglyph-thumbs-up' />
+            <Button as='a' href='#' bsStyle={Button.INFO} iconOnly iconName='rioglyph-status-driving' />
+            <Button as='a' href='#' bsStyle={Button.WARNING} iconOnly iconName='rioglyph-warning-sign' />
+            <Button as='a' href='#' bsStyle={Button.DANGER} iconOnly iconName='rioglyph-error-sign' />
+            <Button as='a' href='#' bsStyle={Button.MUTED_FILLED} iconOnly iconName='rioglyph-cog' />
+            <Button as='a' href='#' bsStyle={Button.MUTED} iconOnly iconName='rioglyph-heart' />
+        </ButtonToolbar>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Buttons as anchor element</div>
+    <div class="btn-toolbar">
+        <a href="#" class="btn btn-default gap-0 btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-truck">
+            </span>Default</a>
+        <a href="#" class="btn btn-primary gap-0 btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-heart">
+            </span>Primary</a>
+        <a href="#" class="btn btn-secondary gap-0 btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-poi">
+            </span>Secondary</a>
+        <a href="#" class="btn btn-success gap-0 btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-thumbs-up">
+            </span>Success</a>
+        <a href="#" class="btn btn-info gap-0 btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-info-sign">
+            </span>Info</a>
+        <a href="#" class="btn btn-warning gap-0 btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-warning-sign">
+            </span>Warning</a>
+        <a href="#" class="btn btn-danger gap-0 btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-error-sign">
+            </span>Danger</a>
+        <a href="#" class="btn btn-muted-filled gap-0 btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-cog">
+            </span>Muted filled</a>
+        <a href="#" class="btn btn-muted gap-0 btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-heart">
+            </span>Muted</a>
+    </div>
+    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15">Buttons as anchor element - disabled</div>
+    <div class="btn-toolbar">
+        <a href="#" class="btn btn-default gap-0 disabled btn-component" aria-disabled="true" tabindex="-1">
+            <span class="rioglyph rioglyph-truck">
+            </span>Default</a>
+        <a href="#" class="btn btn-primary gap-0 disabled btn-component" aria-disabled="true" tabindex="-1">
+            <span class="rioglyph rioglyph-heart">
+            </span>Primary</a>
+        <a href="#" class="btn btn-secondary gap-0 disabled btn-component" aria-disabled="true" tabindex="-1">
+            <span class="rioglyph rioglyph-poi">
+            </span>Secondary</a>
+        <a href="#" class="btn btn-success gap-0 disabled btn-component" aria-disabled="true" tabindex="-1">
+            <span class="rioglyph rioglyph-thumbs-up">
+            </span>Success</a>
+        <a href="#" class="btn btn-info gap-0 disabled btn-component" aria-disabled="true" tabindex="-1">
+            <span class="rioglyph rioglyph-info-sign">
+            </span>Info</a>
+        <a href="#" class="btn btn-warning gap-0 disabled btn-component" aria-disabled="true" tabindex="-1">
+            <span class="rioglyph rioglyph-warning-sign">
+            </span>Warning</a>
+        <a href="#" class="btn btn-danger gap-0 disabled btn-component" aria-disabled="true" tabindex="-1">
+            <span class="rioglyph rioglyph-error-sign">
+            </span>Danger</a>
+        <a href="#" class="btn btn-muted-filled gap-0 disabled btn-component" aria-disabled="true" tabindex="-1">
+            <span class="rioglyph rioglyph-cog">
+            </span>Muted filled</a>
+        <a href="#" class="btn btn-muted gap-0 disabled btn-component" aria-disabled="true" tabindex="-1">
+            <span class="rioglyph rioglyph-heart">
+            </span>Muted</a>
+    </div>
+    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15">Buttons as anchor element - various sizes</div>
+    <div class="btn-toolbar">
+        <a href="#" class="btn btn-default btn-xs gap-0 btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-truck">
+            </span>Extra Small</a>
+        <a href="#" class="btn btn-primary btn-sm gap-0 btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-heart">
+            </span>Small</a>
+        <a href="#" class="btn btn-success btn-md gap-0 btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-thumbs-up">
+            </span>Medium</a>
+        <a href="#" class="btn btn-info btn-lg gap-0 btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-info-sign">
+            </span>Large</a>
+    </div>
+    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15">Buttons as anchor element - icon only</div>
+    <div class="btn-toolbar">
+        <a href="#" class="btn btn-default btn-icon-only gap-0 btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-truck">
+            </span>
+        </a>
+        <a href="#" class="btn btn-primary btn-icon-only gap-0 btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-heart">
+            </span>
+        </a>
+        <a href="#" class="btn btn-success btn-icon-only gap-0 btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-thumbs-up">
+            </span>
+        </a>
+        <a href="#" class="btn btn-info btn-icon-only gap-0 btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-status-driving">
+            </span>
+        </a>
+        <a href="#" class="btn btn-warning btn-icon-only gap-0 btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-warning-sign">
+            </span>
+        </a>
+        <a href="#" class="btn btn-danger btn-icon-only gap-0 btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-error-sign">
+            </span>
+        </a>
+        <a href="#" class="btn btn-muted-filled btn-icon-only gap-0 btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-cog">
+            </span>
+        </a>
+        <a href="#" class="btn btn-muted btn-icon-only gap-0 btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-heart">
+            </span>
+        </a>
+    </div>
+</div>
+```
+
+#### Props: Base button props
+
+### Base button props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| disabled | boolean | false | Whether the button should be disabled. |
+| active | boolean | false | Set the button toggled. Should be used in combination with "asToggle" prop. |
+| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |
+| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |
+| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |
+| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |
+| block | boolean | false | Defines whether the button takes up the full width of the parent element. |
+| bsStyle | BUTTON_STYLE | 'default' | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
+| bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
+| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
+| noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
+| tabIndex | number | 0 | Number of the index used for keyboard support. |
+| className | string | — | Additional classes to be set on the button element. |
+
+#### Props: Regular button
+
+### Regular button
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
+| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | — | Callback function triggered when clicking the button. |
+| type | 'button' \| 'submit | 'button' | Defines the type of the button. This may be used for form submit buttons. |
+
+#### Props: ToggleButton
+
+### ToggleButton
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
+| onClick | (value: boolean) => void | — | Callback function triggered when clicking the button. |
+
+#### Props: Link element buttons
+
+### Link element buttons
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| bsStyle |  | — | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
-| bsSize |  | — | Sets the button size. Possible values are: xs, sm, md and lg |
-| variant |  | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
+| as | 'a' | — | Defines this component as a link element. |
+| type | never | — | Native button type is not supported when using as="a". |
+| href | string | — | Defines the destination URL for the link button. |
+| asToggle | false | false | Toggle behavior is not supported when using as="a". |
+| onClick | (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | — | Callback function triggered when clicking the link. |
 
 ### Example: Action buttons
 
@@ -711,10 +1181,53 @@ export default () => (
 </div>
 ```
 
-#### Props
+#### Props: Base button props
+
+### Base button props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| disabled | boolean | false | Whether the button should be disabled. |
+| active | boolean | false | Set the button toggled. Should be used in combination with "asToggle" prop. |
+| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |
+| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |
+| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |
+| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |
+| block | boolean | false | Defines whether the button takes up the full width of the parent element. |
+| bsStyle | BUTTON_STYLE | 'default' | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
+| bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
+| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
+| noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
+| tabIndex | number | 0 | Number of the index used for keyboard support. |
+| className | string | — | Additional classes to be set on the button element. |
+
+#### Props: Regular button
+
+### Regular button
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
+| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | — | Callback function triggered when clicking the button. |
+| type | 'button' \| 'submit | 'button' | Defines the type of the button. This may be used for form submit buttons. |
+
+#### Props: ToggleButton
+
+### ToggleButton
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
+| onClick | (value: boolean) => void | — | Callback function triggered when clicking the button. |
+
+#### Props: Link element buttons
+
+### Link element buttons
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| bsStyle |  | — | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
-| bsSize |  | — | Sets the button size. Possible values are: xs, sm, md and lg |
-| variant |  | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
+| as | 'a' | — | Defines this component as a link element. |
+| type | never | — | Native button type is not supported when using as="a". |
+| href | string | — | Defines the destination URL for the link button. |
+| asToggle | false | false | Toggle behavior is not supported when using as="a". |
+| onClick | (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | — | Callback function triggered when clicking the link. |