@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/button.md

@@ -0,0 +1,775 @@
+# Button
+
+*Category:* Components
+*Section:* Interaction
+*Source:* https://uikit.developers.rio.cloud/#components/button
+*Captured:* 2025-12-12T12:38:12.809Z
+
+The button component is the React equivalent to the normal HTML button with some To check out the HTML version click here: Buttons
+
+## Button
+
+### Example: Standard buttons
+
+Standard buttons
+DefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted
+Disabled buttons
+DefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted
+Button sizes
+Extra SmallSmallMediumLarge
+Icon only buttons
+
+#### Summary
+
+Standard buttons
+DefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted
+Disabled buttons
+DefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted
+Button sizes
+Extra SmallSmallMediumLarge
+Icon only buttons
+
+#### 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>Standard buttons</FormLabel>
+        <ButtonToolbar>
+            <Button iconName='rioglyph-truck'>Default</Button>
+            <Button bsStyle={Button.PRIMARY} iconName='rioglyph-heart'>
+                Primary
+            </Button>
+            <Button bsStyle={Button.SECONDARY} iconName='rioglyph-poi'>
+                Secondary
+            </Button>
+            <Button bsStyle={Button.SUCCESS} iconName='rioglyph-thumbs-up'>
+                Success
+            </Button>
+            <Button bsStyle={Button.INFO} iconName='rioglyph-info-sign'>
+                Info
+            </Button>
+            <Button bsStyle={Button.WARNING} iconName='rioglyph-warning-sign'>
+                Warning
+            </Button>
+            <Button bsStyle={Button.DANGER} iconName='rioglyph-error-sign'>
+                Danger
+            </Button>
+            <Button bsStyle={Button.MUTED_FILLED} iconName='rioglyph-cog'>
+                Muted filled
+            </Button>
+            <Button bsStyle={Button.MUTED} iconName='rioglyph-heart'>
+                Muted
+            </Button>
+        </ButtonToolbar>
+
+        <FormLabel className='margin-top-15'>Disabled buttons</FormLabel>
+        <ButtonToolbar>
+            <Button disabled iconName='rioglyph-truck'>
+                Default
+            </Button>
+            <Button bsStyle={Button.PRIMARY} disabled iconName='rioglyph-heart'>
+                Primary
+            </Button>
+            <Button bsStyle={Button.SECONDARY} disabled iconName='rioglyph-poi'>
+                Secondary
+            </Button>
+            <Button bsStyle={Button.SUCCESS} disabled iconName='rioglyph-thumbs-up'>
+                Success
+            </Button>
+            <Button bsStyle={Button.INFO} disabled iconName='rioglyph-info-sign'>
+                Info
+            </Button>
+            <Button bsStyle={Button.WARNING} disabled iconName='rioglyph-warning-sign'>
+                Warning
+            </Button>
+            <Button bsStyle={Button.DANGER} disabled iconName='rioglyph-error-sign'>
+                Danger
+            </Button>
+            <Button bsStyle={Button.MUTED_FILLED} disabled iconName='rioglyph-cog'>
+                Muted filled
+            </Button>
+            <Button bsStyle={Button.MUTED} disabled iconName='rioglyph-heart'>
+                Muted
+            </Button>
+        </ButtonToolbar>
+
+        <FormLabel className='margin-top-15'>Button sizes</FormLabel>
+        <ButtonToolbar>
+            <Button bsSize={Button.XS} iconName='rioglyph-truck'>
+                Extra Small
+            </Button>
+            <Button bsStyle={Button.PRIMARY} bsSize={Button.SM} iconName='rioglyph-heart'>
+                Small
+            </Button>
+            <Button bsStyle={Button.SUCCESS} bsSize={Button.MD} iconName='rioglyph-thumbs-up'>
+                Medium
+            </Button>
+            <Button
+                bsStyle={Button.INFO}
+                bsSize={Button.LG}
+                onClick={() => console.log('button clicked')}
+                iconName='rioglyph-info-sign'
+            >
+                Large
+            </Button>
+        </ButtonToolbar>
+
+        <FormLabel className='margin-top-15'>Icon only buttons</FormLabel>
+        <ButtonToolbar>
+            <Button iconOnly iconName='rioglyph-truck' />
+            <Button bsStyle={Button.PRIMARY} iconOnly iconName='rioglyph-heart' />
+            <Button bsStyle={Button.SUCCESS} iconOnly iconName='rioglyph-thumbs-up' />
+            <Button bsStyle={Button.INFO} iconOnly iconName='rioglyph-status-driving' />
+            <Button bsStyle={Button.WARNING} iconOnly iconName='rioglyph-warning-sign' />
+            <Button bsStyle={Button.DANGER} iconOnly iconName='rioglyph-error-sign' />
+            <Button bsStyle={Button.MUTED_FILLED} iconOnly iconName='rioglyph-cog' />
+            <Button 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">Standard buttons</div>
+    <div class="btn-toolbar">
+        <button type="button" class="btn btn-default btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-truck">
+            </span>Default</button>
+        <button type="button" class="btn btn-primary btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-heart">
+            </span>Primary</button>
+        <button type="button" class="btn btn-secondary btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-poi">
+            </span>Secondary</button>
+        <button type="button" class="btn btn-success btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-thumbs-up">
+            </span>Success</button>
+        <button type="button" class="btn btn-info btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-info-sign">
+            </span>Info</button>
+        <button type="button" class="btn btn-warning btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-warning-sign">
+            </span>Warning</button>
+        <button type="button" class="btn btn-danger btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-error-sign">
+            </span>Danger</button>
+        <button type="button" class="btn btn-muted-filled btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-cog">
+            </span>Muted filled</button>
+        <button type="button" class="btn btn-muted btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-heart">
+            </span>Muted</button>
+    </div>
+    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15">Disabled buttons</div>
+    <div class="btn-toolbar">
+        <button type="button" class="btn btn-default btn-component" disabled="" tabindex="0">
+            <span class="rioglyph rioglyph-truck">
+            </span>Default</button>
+        <button type="button" class="btn btn-primary btn-component" disabled="" tabindex="0">
+            <span class="rioglyph rioglyph-heart">
+            </span>Primary</button>
+        <button type="button" class="btn btn-secondary btn-component" disabled="" tabindex="0">
+            <span class="rioglyph rioglyph-poi">
+            </span>Secondary</button>
+        <button type="button" class="btn btn-success btn-component" disabled="" tabindex="0">
+            <span class="rioglyph rioglyph-thumbs-up">
+            </span>Success</button>
+        <button type="button" class="btn btn-info btn-component" disabled="" tabindex="0">
+            <span class="rioglyph rioglyph-info-sign">
+            </span>Info</button>
+        <button type="button" class="btn btn-warning btn-component" disabled="" tabindex="0">
+            <span class="rioglyph rioglyph-warning-sign">
+            </span>Warning</button>
+        <button type="button" class="btn btn-danger btn-component" disabled="" tabindex="0">
+            <span class="rioglyph rioglyph-error-sign">
+            </span>Danger</button>
+        <button type="button" class="btn btn-muted-filled btn-component" disabled="" tabindex="0">
+            <span class="rioglyph rioglyph-cog">
+            </span>Muted filled</button>
+        <button type="button" class="btn btn-muted btn-component" disabled="" tabindex="0">
+            <span class="rioglyph rioglyph-heart">
+            </span>Muted</button>
+    </div>
+    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15">Button sizes</div>
+    <div class="btn-toolbar">
+        <button type="button" class="btn btn-default btn-xs btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-truck">
+            </span>Extra Small</button>
+        <button type="button" class="btn btn-primary btn-sm btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-heart">
+            </span>Small</button>
+        <button type="button" class="btn btn-success btn-md btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-thumbs-up">
+            </span>Medium</button>
+        <button type="button" class="btn btn-info btn-lg btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-info-sign">
+            </span>Large</button>
+    </div>
+    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15">Icon only buttons</div>
+    <div class="btn-toolbar">
+        <button type="button" class="btn btn-default btn-icon-only btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-truck">
+            </span>
+        </button>
+        <button type="button" class="btn btn-primary btn-icon-only btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-heart">
+            </span>
+        </button>
+        <button type="button" class="btn btn-success btn-icon-only btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-thumbs-up">
+            </span>
+        </button>
+        <button type="button" class="btn btn-info btn-icon-only btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-status-driving">
+            </span>
+        </button>
+        <button type="button" class="btn btn-warning btn-icon-only btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-warning-sign">
+            </span>
+        </button>
+        <button type="button" class="btn btn-danger btn-icon-only btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-error-sign">
+            </span>
+        </button>
+        <button type="button" class="btn btn-muted-filled btn-icon-only btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-cog">
+            </span>
+        </button>
+        <button type="button" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-heart">
+            </span>
+        </button>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| disabled | Boolean | false | Set the button disabled. |
+| active | Boolean | false | Set the button toggled. Should be used in combination with "asToggle" prop. |
+| asToggle | Boolean | false | Use the button as a toggle button. The toggle state can be controlled viw the "active" prop. |
+| iconOnly | Boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |
+| 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. |
+| 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. |
+| 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. |
+| onClick | Function | () => {} | Callback function triggered when clicking the button. |
+| bsStyle | String | default | Sets the button style. Possible values are: default, primary, info, warning, danger, success, muted-filled and muted or Button.DEFAULT, Button.PRIMARY, Button.INFO, Button.WARNING, Button.DANGER, Button.SUCCESS, Button.MUTED_FILLED and Button.MUTED |
+| bsSize | String | — | Sets the button size. Possible values are: xs, sm, md and lg or Button.XS, Button.SM, Button.MD and Button.LG |
+| variant | String | — | Sets the button variant. Possible values are: link, link-inline, outline and action or Button.VARIANT_LINK, Button.VARIANT_LINK_INLINE, Button.VARIANT_OUTLINE and Button.VARIANT_ACTION |
+| className | String | — | Additional classes to be set on the button element. |
+| children | any | — | Any element to be rendered on the button. |
+
+### Example: Link buttons
+
+Link buttons
+PrimarySuccessInfoWarningDanger
+Link inline buttons
+
+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.
+
+#### Summary
+
+Link buttons
+PrimarySuccessInfoWarningDanger
+Link inline buttons
+
+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.
+
+#### 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>Link buttons</FormLabel>
+        <ButtonToolbar>
+            <Button bsStyle={Button.PRIMARY} variant={Button.VARIANT_LINK} iconName='rioglyph-heart'>
+                Primary
+            </Button>
+            <Button bsStyle={Button.SUCCESS} variant={Button.VARIANT_LINK} iconName='rioglyph-thumbs-up'>
+                Success
+            </Button>
+            <Button bsStyle={Button.INFO} variant={Button.VARIANT_LINK} iconName='rioglyph-info-sign'>
+                Info
+            </Button>
+            <Button bsStyle={Button.WARNING} variant={Button.VARIANT_LINK} iconName='rioglyph-warning-sign'>
+                Warning
+            </Button>
+            <Button bsStyle={Button.DANGER} variant={Button.VARIANT_LINK} iconName='rioglyph-error-sign'>
+                Danger
+            </Button>
+        </ButtonToolbar>
+        <div>
+            <FormLabel className='margin-top-25'>Link inline buttons</FormLabel>
+        </div>
+        <div className='display-inline-flex gap-4'>
+            This is an example for an{' '}
+            <Button bsStyle={Button.PRIMARY} variant={Button.VARIANT_LINK_INLINE} iconName='rioglyph-new-window'>
+                Inline link
+            </Button>{' '}
+            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>.
+        </p>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```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="btn-toolbar">
+        <button type="button" class="btn btn-primary btn-link btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-heart">
+            </span>Primary</button>
+        <button type="button" class="btn btn-success btn-link btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-thumbs-up">
+            </span>Success</button>
+        <button type="button" class="btn btn-info btn-link btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-info-sign">
+            </span>Info</button>
+        <button type="button" class="btn btn-warning btn-link btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-warning-sign">
+            </span>Warning</button>
+        <button type="button" class="btn btn-danger btn-link btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-error-sign">
+            </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>
+    <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>.
+    </p>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| disabled | Boolean | false | Set the button disabled. |
+| active | Boolean | false | Set the button toggled. Should be used in combination with "asToggle" prop. |
+| asToggle | Boolean | false | Use the button as a toggle button. The toggle state can be controlled viw the "active" prop. |
+| iconOnly | Boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |
+| 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. |
+| 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. |
+| 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. |
+| onClick | Function | () => {} | Callback function triggered when clicking the button. |
+| bsStyle | String | default | Sets the button style. Possible values are: default, primary, info, warning, danger, success, muted-filled and muted or Button.DEFAULT, Button.PRIMARY, Button.INFO, Button.WARNING, Button.DANGER, Button.SUCCESS, Button.MUTED_FILLED and Button.MUTED |
+| bsSize | String | — | Sets the button size. Possible values are: xs, sm, md and lg or Button.XS, Button.SM, Button.MD and Button.LG |
+| variant | String | — | Sets the button variant. Possible values are: link, link-inline, outline and action or Button.VARIANT_LINK, Button.VARIANT_LINK_INLINE, Button.VARIANT_OUTLINE and Button.VARIANT_ACTION |
+| className | String | — | Additional classes to be set on the button element. |
+| children | any | — | Any element to be rendered on the button. |
+
+### Example: Button group
+
+Button group
+
+Button with tooltips
+Button with TooltipDisabled Button with Tooltip
+Block button
+Block button
+Multiline button
+This is a multiline button with a lot of Text
+Toggle button
+Toggle me
+Add something / take picture button example
+
+#### Summary
+
+Button group
+
+Button with tooltips
+Button with TooltipDisabled Button with Tooltip
+Block button
+Block button
+Multiline button
+This is a multiline button with a lot of Text
+Toggle button
+Toggle me
+Add something / take picture button example
+
+#### React (tsx)
+
+```tsx
+import Button from '@rio-cloud/rio-uikit/Button';
+import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';
+import SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';
+import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
+
+export default () => (
+    <div>
+        <FormLabel>Button group</FormLabel>
+        <ButtonToolbar>
+            <div className='btn-group'>
+                <Button iconName='rioglyph-cloud-download' iconOnly />
+                <Button iconName='rioglyph-cloud-upload' iconOnly />
+                <Button iconName='rioglyph-cog' iconOnly />
+            </div>
+        </ButtonToolbar>
+
+        <FormLabel className='margin-top-15'>Button with tooltips</FormLabel>
+        <ButtonToolbar>
+            <SimpleTooltip content='Uhh, click me!' width='auto' placement='bottom'>
+                <Button bsStyle={Button.INFO}>Button with Tooltip</Button>
+            </SimpleTooltip>
+
+            <SimpleTooltip content='This is not the button you are looking for' placement='top'>
+                <span className='cursor-not-allowed'>
+                    <Button bsStyle={Button.INFO} disabled>
+                        Disabled Button with Tooltip
+                    </Button>
+                </span>
+            </SimpleTooltip>
+        </ButtonToolbar>
+
+        <FormLabel className='margin-top-15'>Block button</FormLabel>
+        <ButtonToolbar className='max-width-500'>
+            <Button block>Block button</Button>
+        </ButtonToolbar>
+
+        <FormLabel className='margin-top-15'>Multiline button</FormLabel>
+        <ButtonToolbar className='max-width-200'>
+            <Button bsStyle={Button.PRIMARY} bsSize={Button.LG} multiline>
+                This is a multiline button with a lot of Text
+            </Button>
+        </ButtonToolbar>
+
+        <FormLabel className='margin-top-15'>Toggle button</FormLabel>
+        <ButtonToolbar className='max-width-200'>
+            <Button asToggle>Toggle me</Button>
+        </ButtonToolbar>
+
+        <FormLabel className='margin-top-15'>Add something / take picture button example</FormLabel>
+        <ButtonToolbar className='max-width-200'>
+            <Button
+                bsStyle='unstyled'
+                className={
+                    'height-70 width-60 bg-lightest border border-style-dashed ' +
+                    'border-width-1 border-color-light text-color-light hover-text-color-darker'
+                }
+            >
+                <span className='rioglyph rioglyph-plus-sign margin-0 text-size-20' />
+            </Button>
+        </ButtonToolbar>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Button group</div>
+    <div class="btn-toolbar">
+        <div class="btn-group">
+            <button type="button" class="btn btn-default btn-icon-only btn-component" tabindex="0">
+                <span class="rioglyph rioglyph-cloud-download">
+                </span>
+            </button>
+            <button type="button" class="btn btn-default btn-icon-only btn-component" tabindex="0">
+                <span class="rioglyph rioglyph-cloud-upload">
+                </span>
+            </button>
+            <button type="button" class="btn btn-default btn-icon-only btn-component" tabindex="0">
+                <span class="rioglyph rioglyph-cog">
+                </span>
+            </button>
+        </div>
+    </div>
+    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15">Button with tooltips</div>
+    <div class="btn-toolbar">
+        <button type="button" class="btn btn-info btn-component" tabindex="0">Button with Tooltip</button>
+        <span class="cursor-not-allowed">
+            <button type="button" class="btn btn-info btn-component" disabled="" tabindex="0">Disabled Button with Tooltip</button>
+        </span>
+    </div>
+    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15">Block button</div>
+    <div class="max-width-500 btn-toolbar">
+        <button type="button" class="btn btn-default btn-block btn-component" tabindex="0">Block button</button>
+    </div>
+    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15">Multiline button</div>
+    <div class="max-width-200 btn-toolbar">
+        <button type="button" class="btn btn-primary btn-lg btn-multiline btn-component" tabindex="0">This is a multiline button with a lot of Text</button>
+    </div>
+    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15">Toggle button</div>
+    <div class="max-width-200 btn-toolbar">
+        <button type="button" class="btn btn-default btn-toggle btn-component" tabindex="0">Toggle me</button>
+    </div>
+    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15">Add something / take picture button example</div>
+    <div class="max-width-200 btn-toolbar">
+        <button type="button" class="btn btn-unstyled btn-component height-70 width-60 bg-lightest border border-style-dashed border-width-1 border-color-light text-color-light hover-text-color-darker" tabindex="0">
+            <span class="rioglyph rioglyph-plus-sign margin-0 text-size-20">
+            </span>
+        </button>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| disabled | Boolean | false | Set the button disabled. |
+| active | Boolean | false | Set the button toggled. Should be used in combination with "asToggle" prop. |
+| asToggle | Boolean | false | Use the button as a toggle button. The toggle state can be controlled viw the "active" prop. |
+| iconOnly | Boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |
+| 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. |
+| 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. |
+| 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. |
+| onClick | Function | () => {} | Callback function triggered when clicking the button. |
+| bsStyle | String | default | Sets the button style. Possible values are: default, primary, info, warning, danger, success, muted-filled and muted or Button.DEFAULT, Button.PRIMARY, Button.INFO, Button.WARNING, Button.DANGER, Button.SUCCESS, Button.MUTED_FILLED and Button.MUTED |
+| bsSize | String | — | Sets the button size. Possible values are: xs, sm, md and lg or Button.XS, Button.SM, Button.MD and Button.LG |
+| variant | String | — | Sets the button variant. Possible values are: link, link-inline, outline and action or Button.VARIANT_LINK, Button.VARIANT_LINK_INLINE, Button.VARIANT_OUTLINE and Button.VARIANT_ACTION |
+| className | String | — | Additional classes to be set on the button element. |
+| children | any | — | Any element to be rendered on the button. |
+
+### Example: Outlined buttons (transparent)
+
+Outlined buttons (transparent)
+DefaultPrimarySuccessInfoWarningDangerMuted filledMuted
+
+#### Summary
+
+Outlined buttons (transparent)
+DefaultPrimarySuccessInfoWarningDangerMuted filledMuted
+
+#### 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>Outlined buttons (transparent)</FormLabel>
+        <ButtonToolbar>
+            <Button variant={Button.VARIANT_OUTLINE} iconName='rioglyph-truck'>
+                Default
+            </Button>
+            <Button bsStyle={Button.PRIMARY} variant={Button.VARIANT_OUTLINE} iconName='rioglyph-heart'>
+                Primary
+            </Button>
+            <Button bsStyle={Button.SUCCESS} variant={Button.VARIANT_OUTLINE} iconName='rioglyph-thumbs-up'>
+                Success
+            </Button>
+            <Button bsStyle={Button.INFO} variant={Button.VARIANT_OUTLINE} iconName='rioglyph-info-sign'>
+                Info
+            </Button>
+            <Button bsStyle={Button.WARNING} variant={Button.VARIANT_OUTLINE} iconName='rioglyph-warning-sign'>
+                Warning
+            </Button>
+            <Button bsStyle={Button.DANGER} variant={Button.VARIANT_OUTLINE} iconName='rioglyph-error-sign'>
+                Danger
+            </Button>
+            <Button bsStyle={Button.MUTED_FILLED} variant={Button.VARIANT_OUTLINE} iconName='rioglyph-cog'>
+                Muted filled
+            </Button>
+            <Button bsStyle={Button.MUTED} variant={Button.VARIANT_OUTLINE} iconName='rioglyph-heart'>
+                Muted
+            </Button>
+        </ButtonToolbar>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Outlined buttons (transparent)</div>
+    <div class="btn-toolbar">
+        <button type="button" class="btn btn-default btn-outline btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-truck">
+            </span>Default</button>
+        <button type="button" class="btn btn-primary btn-outline btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-heart">
+            </span>Primary</button>
+        <button type="button" class="btn btn-success btn-outline btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-thumbs-up">
+            </span>Success</button>
+        <button type="button" class="btn btn-info btn-outline btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-info-sign">
+            </span>Info</button>
+        <button type="button" class="btn btn-warning btn-outline btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-warning-sign">
+            </span>Warning</button>
+        <button type="button" class="btn btn-danger btn-outline btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-error-sign">
+            </span>Danger</button>
+        <button type="button" class="btn btn-muted-filled btn-outline btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-cog">
+            </span>Muted filled</button>
+        <button type="button" class="btn btn-muted btn-outline btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-heart">
+            </span>Muted</button>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| disabled | Boolean | false | Set the button disabled. |
+| active | Boolean | false | Set the button toggled. Should be used in combination with "asToggle" prop. |
+| asToggle | Boolean | false | Use the button as a toggle button. The toggle state can be controlled viw the "active" prop. |
+| iconOnly | Boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |
+| 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. |
+| 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. |
+| 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. |
+| onClick | Function | () => {} | Callback function triggered when clicking the button. |
+| bsStyle | String | default | Sets the button style. Possible values are: default, primary, info, warning, danger, success, muted-filled and muted or Button.DEFAULT, Button.PRIMARY, Button.INFO, Button.WARNING, Button.DANGER, Button.SUCCESS, Button.MUTED_FILLED and Button.MUTED |
+| bsSize | String | — | Sets the button size. Possible values are: xs, sm, md and lg or Button.XS, Button.SM, Button.MD and Button.LG |
+| variant | String | — | Sets the button variant. Possible values are: link, link-inline, outline and action or Button.VARIANT_LINK, Button.VARIANT_LINK_INLINE, Button.VARIANT_OUTLINE and Button.VARIANT_ACTION |
+| className | String | — | Additional classes to be set on the button element. |
+| children | any | — | Any element to be rendered on the button. |
+
+### Example: Action buttons
+
+Action buttons
+Click me!Click me!Click me!Click me!Click me!Click me!
+
+#### Summary
+
+Action buttons
+Click me!Click me!Click me!Click me!Click me!Click me!
+
+#### 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>Action buttons</FormLabel>
+        <ButtonToolbar className='align-items-start'>
+            <Button
+                bsStyle={Button.PRIMARY}
+                variant={Button.VARIANT_ACTION}
+                iconName='rioglyph-truck'
+                className='text-size-h1'
+            >
+                Click me!
+            </Button>
+            <Button
+                bsStyle={Button.SUCCESS}
+                variant={Button.VARIANT_ACTION}
+                iconName='rioglyph-thumbs-up'
+                className='text-size-h2'
+            >
+                Click me!
+            </Button>
+            <Button
+                bsStyle={Button.INFO}
+                variant={Button.VARIANT_ACTION}
+                iconName='rioglyph-info-sign'
+                className='text-size-h3'
+            >
+                Click me!
+            </Button>
+            <Button
+                bsStyle={Button.WARNING}
+                variant={Button.VARIANT_ACTION}
+                iconName='rioglyph-warning-sign'
+                className='text-size-20'
+            >
+                Click me!
+            </Button>
+            <Button
+                bsStyle={Button.DANGER}
+                variant={Button.VARIANT_ACTION}
+                iconName='rioglyph-error-sign'
+                className='text-size-16'
+            >
+                Click me!
+            </Button>
+            <Button
+                bsStyle={Button.MUTED}
+                variant={Button.VARIANT_ACTION}
+                iconName='rioglyph-cog'
+                className='text-size-14'
+            >
+                Click me!
+            </Button>
+        </ButtonToolbar>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Action buttons</div>
+    <div class="align-items-start btn-toolbar">
+        <button type="button" class="btn btn-primary btn-action btn-component text-size-h1" tabindex="0">
+            <span class="rioglyph rioglyph-truck">
+            </span>Click me!</button>
+        <button type="button" class="btn btn-success btn-action btn-component text-size-h2" tabindex="0">
+            <span class="rioglyph rioglyph-thumbs-up">
+            </span>Click me!</button>
+        <button type="button" class="btn btn-info btn-action btn-component text-size-h3" tabindex="0">
+            <span class="rioglyph rioglyph-info-sign">
+            </span>Click me!</button>
+        <button type="button" class="btn btn-warning btn-action btn-component text-size-20" tabindex="0">
+            <span class="rioglyph rioglyph-warning-sign">
+            </span>Click me!</button>
+        <button type="button" class="btn btn-danger btn-action btn-component text-size-16" tabindex="0">
+            <span class="rioglyph rioglyph-error-sign">
+            </span>Click me!</button>
+        <button type="button" class="btn btn-muted btn-action btn-component text-size-14" tabindex="0">
+            <span class="rioglyph rioglyph-cog">
+            </span>Click me!</button>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| disabled | Boolean | false | Set the button disabled. |
+| active | Boolean | false | Set the button toggled. Should be used in combination with "asToggle" prop. |
+| asToggle | Boolean | false | Use the button as a toggle button. The toggle state can be controlled viw the "active" prop. |
+| iconOnly | Boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |
+| 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. |
+| 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. |
+| 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. |
+| onClick | Function | () => {} | Callback function triggered when clicking the button. |
+| bsStyle | String | default | Sets the button style. Possible values are: default, primary, info, warning, danger, success, muted-filled and muted or Button.DEFAULT, Button.PRIMARY, Button.INFO, Button.WARNING, Button.DANGER, Button.SUCCESS, Button.MUTED_FILLED and Button.MUTED |
+| bsSize | String | — | Sets the button size. Possible values are: xs, sm, md and lg or Button.XS, Button.SM, Button.MD and Button.LG |
+| variant | String | — | Sets the button variant. Possible values are: link, link-inline, outline and action or Button.VARIANT_LINK, Button.VARIANT_LINK_INLINE, Button.VARIANT_OUTLINE and Button.VARIANT_ACTION |
+| className | String | — | Additional classes to be set on the button element. |
+| children | any | — | Any element to be rendered on the button. |