@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Components/components/button.json

@@ -0,0 +1,583 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:10.960Z",
+    "source": "https://uikit.developers.rio.cloud/#components/button",
+    "category": "Components",
+    "section": "Interaction",
+    "slug": "components/button",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "525d0a136992f512074697c60ac4c83df0d6bcbdb3191ef8de97eaf138fe9311"
+  },
+  "title": "Button",
+  "lead": "The button component is the React equivalent to the normal HTML button with some To check out the HTML version click here: Buttons",
+  "content": [
+    {
+      "heading": "Button",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Standard buttons",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Button from '@rio-cloud/rio-uikit/Button';\nimport ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\n\nexport default () => (\n    <div>\n        <FormLabel>Standard buttons</FormLabel>\n        <ButtonToolbar>\n            <Button iconName='rioglyph-truck'>Default</Button>\n            <Button bsStyle={Button.PRIMARY} iconName='rioglyph-heart'>\n                Primary\n            </Button>\n            <Button bsStyle={Button.SECONDARY} iconName='rioglyph-poi'>\n                Secondary\n            </Button>\n            <Button bsStyle={Button.SUCCESS} iconName='rioglyph-thumbs-up'>\n                Success\n            </Button>\n            <Button bsStyle={Button.INFO} iconName='rioglyph-info-sign'>\n                Info\n            </Button>\n            <Button bsStyle={Button.WARNING} iconName='rioglyph-warning-sign'>\n                Warning\n            </Button>\n            <Button bsStyle={Button.DANGER} iconName='rioglyph-error-sign'>\n                Danger\n            </Button>\n            <Button bsStyle={Button.MUTED_FILLED} iconName='rioglyph-cog'>\n                Muted filled\n            </Button>\n            <Button bsStyle={Button.MUTED} iconName='rioglyph-heart'>\n                Muted\n            </Button>\n        </ButtonToolbar>\n\n        <FormLabel className='margin-top-15'>Disabled buttons</FormLabel>\n        <ButtonToolbar>\n            <Button disabled iconName='rioglyph-truck'>\n                Default\n            </Button>\n            <Button bsStyle={Button.PRIMARY} disabled iconName='rioglyph-heart'>\n                Primary\n            </Button>\n            <Button bsStyle={Button.SECONDARY} disabled iconName='rioglyph-poi'>\n                Secondary\n            </Button>\n            <Button bsStyle={Button.SUCCESS} disabled iconName='rioglyph-thumbs-up'>\n                Success\n            </Button>\n            <Button bsStyle={Button.INFO} disabled iconName='rioglyph-info-sign'>\n                Info\n            </Button>\n            <Button bsStyle={Button.WARNING} disabled iconName='rioglyph-warning-sign'>\n                Warning\n            </Button>\n            <Button bsStyle={Button.DANGER} disabled iconName='rioglyph-error-sign'>\n                Danger\n            </Button>\n            <Button bsStyle={Button.MUTED_FILLED} disabled iconName='rioglyph-cog'>\n                Muted filled\n            </Button>\n            <Button bsStyle={Button.MUTED} disabled iconName='rioglyph-heart'>\n                Muted\n            </Button>\n        </ButtonToolbar>\n\n        <FormLabel className='margin-top-15'>Button sizes</FormLabel>\n        <ButtonToolbar>\n            <Button bsSize={Button.XS} iconName='rioglyph-truck'>\n                Extra Small\n            </Button>\n            <Button bsStyle={Button.PRIMARY} bsSize={Button.SM} iconName='rioglyph-heart'>\n                Small\n            </Button>\n            <Button bsStyle={Button.SUCCESS} bsSize={Button.MD} iconName='rioglyph-thumbs-up'>\n                Medium\n            </Button>\n            <Button\n                bsStyle={Button.INFO}\n                bsSize={Button.LG}\n                onClick={() => console.log('button clicked')}\n                iconName='rioglyph-info-sign'\n            >\n                Large\n            </Button>\n        </ButtonToolbar>\n\n        <FormLabel className='margin-top-15'>Icon only buttons</FormLabel>\n        <ButtonToolbar>\n            <Button iconOnly iconName='rioglyph-truck' />\n            <Button bsStyle={Button.PRIMARY} iconOnly iconName='rioglyph-heart' />\n            <Button bsStyle={Button.SUCCESS} iconOnly iconName='rioglyph-thumbs-up' />\n            <Button bsStyle={Button.INFO} iconOnly iconName='rioglyph-status-driving' />\n            <Button bsStyle={Button.WARNING} iconOnly iconName='rioglyph-warning-sign' />\n            <Button bsStyle={Button.DANGER} iconOnly iconName='rioglyph-error-sign' />\n            <Button bsStyle={Button.MUTED_FILLED} iconOnly iconName='rioglyph-cog' />\n            <Button bsStyle={Button.MUTED} iconOnly iconName='rioglyph-heart' />\n        </ButtonToolbar>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Standard buttons</div>\n    <div class=\"btn-toolbar\">\n        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-truck\">\n            </span>Default</button>\n        <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-heart\">\n            </span>Primary</button>\n        <button type=\"button\" class=\"btn btn-secondary btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-poi\">\n            </span>Secondary</button>\n        <button type=\"button\" class=\"btn btn-success btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-thumbs-up\">\n            </span>Success</button>\n        <button type=\"button\" class=\"btn btn-info btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-info-sign\">\n            </span>Info</button>\n        <button type=\"button\" class=\"btn btn-warning btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-warning-sign\">\n            </span>Warning</button>\n        <button type=\"button\" class=\"btn btn-danger btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-error-sign\">\n            </span>Danger</button>\n        <button type=\"button\" class=\"btn btn-muted-filled btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-cog\">\n            </span>Muted filled</button>\n        <button type=\"button\" class=\"btn btn-muted btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-heart\">\n            </span>Muted</button>\n    </div>\n    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15\">Disabled buttons</div>\n    <div class=\"btn-toolbar\">\n        <button type=\"button\" class=\"btn btn-default btn-component\" disabled=\"\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-truck\">\n            </span>Default</button>\n        <button type=\"button\" class=\"btn btn-primary btn-component\" disabled=\"\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-heart\">\n            </span>Primary</button>\n        <button type=\"button\" class=\"btn btn-secondary btn-component\" disabled=\"\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-poi\">\n            </span>Secondary</button>\n        <button type=\"button\" class=\"btn btn-success btn-component\" disabled=\"\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-thumbs-up\">\n            </span>Success</button>\n        <button type=\"button\" class=\"btn btn-info btn-component\" disabled=\"\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-info-sign\">\n            </span>Info</button>\n        <button type=\"button\" class=\"btn btn-warning btn-component\" disabled=\"\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-warning-sign\">\n            </span>Warning</button>\n        <button type=\"button\" class=\"btn btn-danger btn-component\" disabled=\"\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-error-sign\">\n            </span>Danger</button>\n        <button type=\"button\" class=\"btn btn-muted-filled btn-component\" disabled=\"\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-cog\">\n            </span>Muted filled</button>\n        <button type=\"button\" class=\"btn btn-muted btn-component\" disabled=\"\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-heart\">\n            </span>Muted</button>\n    </div>\n    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15\">Button sizes</div>\n    <div class=\"btn-toolbar\">\n        <button type=\"button\" class=\"btn btn-default btn-xs btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-truck\">\n            </span>Extra Small</button>\n        <button type=\"button\" class=\"btn btn-primary btn-sm btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-heart\">\n            </span>Small</button>\n        <button type=\"button\" class=\"btn btn-success btn-md btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-thumbs-up\">\n            </span>Medium</button>\n        <button type=\"button\" class=\"btn btn-info btn-lg btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-info-sign\">\n            </span>Large</button>\n    </div>\n    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15\">Icon only buttons</div>\n    <div class=\"btn-toolbar\">\n        <button type=\"button\" class=\"btn btn-default btn-icon-only btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-truck\">\n            </span>\n        </button>\n        <button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-heart\">\n            </span>\n        </button>\n        <button type=\"button\" class=\"btn btn-success btn-icon-only btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-thumbs-up\">\n            </span>\n        </button>\n        <button type=\"button\" class=\"btn btn-info btn-icon-only btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-status-driving\">\n            </span>\n        </button>\n        <button type=\"button\" class=\"btn btn-warning btn-icon-only btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-warning-sign\">\n            </span>\n        </button>\n        <button type=\"button\" class=\"btn btn-danger btn-icon-only btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-error-sign\">\n            </span>\n        </button>\n        <button type=\"button\" class=\"btn btn-muted-filled btn-icon-only btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-cog\">\n            </span>\n        </button>\n        <button type=\"button\" class=\"btn btn-muted btn-icon-only btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-heart\">\n            </span>\n        </button>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set the button disabled."
+                    },
+                    {
+                      "name": "active",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set the button toggled. Should be used in combination with \"asToggle\" prop."
+                    },
+                    {
+                      "name": "asToggle",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Use the button as a toggle button. The toggle state can be controlled viw the \"active\" prop."
+                    },
+                    {
+                      "name": "iconOnly",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Use when the content of the button is an icon only to adapt the button spacing accordingly."
+                    },
+                    {
+                      "name": "iconName",
+                      "type": "String",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "iconRight",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side."
+                    },
+                    {
+                      "name": "multiline",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only."
+                    },
+                    {
+                      "name": "block",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the button takes up the full width of the parent element."
+                    },
+                    {
+                      "name": "onClick",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function triggered when clicking the button."
+                    },
+                    {
+                      "name": "bsStyle",
+                      "type": "String",
+                      "default": "default",
+                      "description": "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"
+                    },
+                    {
+                      "name": "bsSize",
+                      "type": "String",
+                      "default": "",
+                      "description": "Sets the button size. Possible values are: xs, sm, md and lg or Button.XS, Button.SM, Button.MD and Button.LG"
+                    },
+                    {
+                      "name": "variant",
+                      "type": "String",
+                      "default": "",
+                      "description": "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"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the button element."
+                    },
+                    {
+                      "name": "children",
+                      "type": "any",
+                      "default": "",
+                      "description": "Any element to be rendered on the button."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Link buttons",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Button from '@rio-cloud/rio-uikit/Button';\nimport ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\n\nexport default () => (\n    <div>\n        <FormLabel>Link buttons</FormLabel>\n        <ButtonToolbar>\n            <Button bsStyle={Button.PRIMARY} variant={Button.VARIANT_LINK} iconName='rioglyph-heart'>\n                Primary\n            </Button>\n            <Button bsStyle={Button.SUCCESS} variant={Button.VARIANT_LINK} iconName='rioglyph-thumbs-up'>\n                Success\n            </Button>\n            <Button bsStyle={Button.INFO} variant={Button.VARIANT_LINK} iconName='rioglyph-info-sign'>\n                Info\n            </Button>\n            <Button bsStyle={Button.WARNING} variant={Button.VARIANT_LINK} iconName='rioglyph-warning-sign'>\n                Warning\n            </Button>\n            <Button bsStyle={Button.DANGER} variant={Button.VARIANT_LINK} iconName='rioglyph-error-sign'>\n                Danger\n            </Button>\n        </ButtonToolbar>\n        <div>\n            <FormLabel className='margin-top-25'>Link inline buttons</FormLabel>\n        </div>\n        <div className='display-inline-flex gap-4'>\n            This is an example for an{' '}\n            <Button bsStyle={Button.PRIMARY} variant={Button.VARIANT_LINK_INLINE} iconName='rioglyph-new-window'>\n                Inline link\n            </Button>{' '}\n            button.\n        </div>\n        <p className='margin-top-25'>\n            <span className='label label-info label-condensed margin-right-5'>Note</span> Link buttons can also be used\n            within text blocks by setting the variant type to <code className='code'>Button.VARIANT_LINK_INLINE</code>.\n        </p>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Link buttons</div>\n    <div class=\"btn-toolbar\">\n        <button type=\"button\" class=\"btn btn-primary btn-link btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-heart\">\n            </span>Primary</button>\n        <button type=\"button\" class=\"btn btn-success btn-link btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-thumbs-up\">\n            </span>Success</button>\n        <button type=\"button\" class=\"btn btn-info btn-link btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-info-sign\">\n            </span>Info</button>\n        <button type=\"button\" class=\"btn btn-warning btn-link btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-warning-sign\">\n            </span>Warning</button>\n        <button type=\"button\" class=\"btn btn-danger btn-link btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-error-sign\">\n            </span>Danger</button>\n    </div>\n    <div>\n        <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-25\">Link inline buttons</div>\n    </div>\n    <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\">\n            <span class=\"rioglyph rioglyph-new-window\">\n            </span>Inline link</button> button.</div>\n    <p class=\"margin-top-25\">\n        <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>.\n    </p>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set the button disabled."
+                    },
+                    {
+                      "name": "active",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set the button toggled. Should be used in combination with \"asToggle\" prop."
+                    },
+                    {
+                      "name": "asToggle",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Use the button as a toggle button. The toggle state can be controlled viw the \"active\" prop."
+                    },
+                    {
+                      "name": "iconOnly",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Use when the content of the button is an icon only to adapt the button spacing accordingly."
+                    },
+                    {
+                      "name": "iconName",
+                      "type": "String",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "iconRight",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side."
+                    },
+                    {
+                      "name": "multiline",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only."
+                    },
+                    {
+                      "name": "block",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the button takes up the full width of the parent element."
+                    },
+                    {
+                      "name": "onClick",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function triggered when clicking the button."
+                    },
+                    {
+                      "name": "bsStyle",
+                      "type": "String",
+                      "default": "default",
+                      "description": "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"
+                    },
+                    {
+                      "name": "bsSize",
+                      "type": "String",
+                      "default": "",
+                      "description": "Sets the button size. Possible values are: xs, sm, md and lg or Button.XS, Button.SM, Button.MD and Button.LG"
+                    },
+                    {
+                      "name": "variant",
+                      "type": "String",
+                      "default": "",
+                      "description": "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"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the button element."
+                    },
+                    {
+                      "name": "children",
+                      "type": "any",
+                      "default": "",
+                      "description": "Any element to be rendered on the button."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Button group",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Button from '@rio-cloud/rio-uikit/Button';\nimport ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';\nimport SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\n\nexport default () => (\n    <div>\n        <FormLabel>Button group</FormLabel>\n        <ButtonToolbar>\n            <div className='btn-group'>\n                <Button iconName='rioglyph-cloud-download' iconOnly />\n                <Button iconName='rioglyph-cloud-upload' iconOnly />\n                <Button iconName='rioglyph-cog' iconOnly />\n            </div>\n        </ButtonToolbar>\n\n        <FormLabel className='margin-top-15'>Button with tooltips</FormLabel>\n        <ButtonToolbar>\n            <SimpleTooltip content='Uhh, click me!' width='auto' placement='bottom'>\n                <Button bsStyle={Button.INFO}>Button with Tooltip</Button>\n            </SimpleTooltip>\n\n            <SimpleTooltip content='This is not the button you are looking for' placement='top'>\n                <span className='cursor-not-allowed'>\n                    <Button bsStyle={Button.INFO} disabled>\n                        Disabled Button with Tooltip\n                    </Button>\n                </span>\n            </SimpleTooltip>\n        </ButtonToolbar>\n\n        <FormLabel className='margin-top-15'>Block button</FormLabel>\n        <ButtonToolbar className='max-width-500'>\n            <Button block>Block button</Button>\n        </ButtonToolbar>\n\n        <FormLabel className='margin-top-15'>Multiline button</FormLabel>\n        <ButtonToolbar className='max-width-200'>\n            <Button bsStyle={Button.PRIMARY} bsSize={Button.LG} multiline>\n                This is a multiline button with a lot of Text\n            </Button>\n        </ButtonToolbar>\n\n        <FormLabel className='margin-top-15'>Toggle button</FormLabel>\n        <ButtonToolbar className='max-width-200'>\n            <Button asToggle>Toggle me</Button>\n        </ButtonToolbar>\n\n        <FormLabel className='margin-top-15'>Add something / take picture button example</FormLabel>\n        <ButtonToolbar className='max-width-200'>\n            <Button\n                bsStyle='unstyled'\n                className={\n                    'height-70 width-60 bg-lightest border border-style-dashed ' +\n                    'border-width-1 border-color-light text-color-light hover-text-color-darker'\n                }\n            >\n                <span className='rioglyph rioglyph-plus-sign margin-0 text-size-20' />\n            </Button>\n        </ButtonToolbar>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Button group</div>\n    <div class=\"btn-toolbar\">\n        <div class=\"btn-group\">\n            <button type=\"button\" class=\"btn btn-default btn-icon-only btn-component\" tabindex=\"0\">\n                <span class=\"rioglyph rioglyph-cloud-download\">\n                </span>\n            </button>\n            <button type=\"button\" class=\"btn btn-default btn-icon-only btn-component\" tabindex=\"0\">\n                <span class=\"rioglyph rioglyph-cloud-upload\">\n                </span>\n            </button>\n            <button type=\"button\" class=\"btn btn-default btn-icon-only btn-component\" tabindex=\"0\">\n                <span class=\"rioglyph rioglyph-cog\">\n                </span>\n            </button>\n        </div>\n    </div>\n    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15\">Button with tooltips</div>\n    <div class=\"btn-toolbar\">\n        <button type=\"button\" class=\"btn btn-info btn-component\" tabindex=\"0\">Button with Tooltip</button>\n        <span class=\"cursor-not-allowed\">\n            <button type=\"button\" class=\"btn btn-info btn-component\" disabled=\"\" tabindex=\"0\">Disabled Button with Tooltip</button>\n        </span>\n    </div>\n    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15\">Block button</div>\n    <div class=\"max-width-500 btn-toolbar\">\n        <button type=\"button\" class=\"btn btn-default btn-block btn-component\" tabindex=\"0\">Block button</button>\n    </div>\n    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15\">Multiline button</div>\n    <div class=\"max-width-200 btn-toolbar\">\n        <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>\n    </div>\n    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15\">Toggle button</div>\n    <div class=\"max-width-200 btn-toolbar\">\n        <button type=\"button\" class=\"btn btn-default btn-toggle btn-component\" tabindex=\"0\">Toggle me</button>\n    </div>\n    <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>\n    <div class=\"max-width-200 btn-toolbar\">\n        <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\">\n            <span class=\"rioglyph rioglyph-plus-sign margin-0 text-size-20\">\n            </span>\n        </button>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set the button disabled."
+                    },
+                    {
+                      "name": "active",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set the button toggled. Should be used in combination with \"asToggle\" prop."
+                    },
+                    {
+                      "name": "asToggle",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Use the button as a toggle button. The toggle state can be controlled viw the \"active\" prop."
+                    },
+                    {
+                      "name": "iconOnly",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Use when the content of the button is an icon only to adapt the button spacing accordingly."
+                    },
+                    {
+                      "name": "iconName",
+                      "type": "String",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "iconRight",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side."
+                    },
+                    {
+                      "name": "multiline",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only."
+                    },
+                    {
+                      "name": "block",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the button takes up the full width of the parent element."
+                    },
+                    {
+                      "name": "onClick",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function triggered when clicking the button."
+                    },
+                    {
+                      "name": "bsStyle",
+                      "type": "String",
+                      "default": "default",
+                      "description": "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"
+                    },
+                    {
+                      "name": "bsSize",
+                      "type": "String",
+                      "default": "",
+                      "description": "Sets the button size. Possible values are: xs, sm, md and lg or Button.XS, Button.SM, Button.MD and Button.LG"
+                    },
+                    {
+                      "name": "variant",
+                      "type": "String",
+                      "default": "",
+                      "description": "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"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the button element."
+                    },
+                    {
+                      "name": "children",
+                      "type": "any",
+                      "default": "",
+                      "description": "Any element to be rendered on the button."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Outlined buttons (transparent)",
+          "rendered_html": "<div class=\"playground-content  bg-checkerboard padding-20 padding-bottom-25\" style=\"width: 100%;\"><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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Button from '@rio-cloud/rio-uikit/Button';\nimport ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\n\nexport default () => (\n    <div>\n        <FormLabel>Outlined buttons (transparent)</FormLabel>\n        <ButtonToolbar>\n            <Button variant={Button.VARIANT_OUTLINE} iconName='rioglyph-truck'>\n                Default\n            </Button>\n            <Button bsStyle={Button.PRIMARY} variant={Button.VARIANT_OUTLINE} iconName='rioglyph-heart'>\n                Primary\n            </Button>\n            <Button bsStyle={Button.SUCCESS} variant={Button.VARIANT_OUTLINE} iconName='rioglyph-thumbs-up'>\n                Success\n            </Button>\n            <Button bsStyle={Button.INFO} variant={Button.VARIANT_OUTLINE} iconName='rioglyph-info-sign'>\n                Info\n            </Button>\n            <Button bsStyle={Button.WARNING} variant={Button.VARIANT_OUTLINE} iconName='rioglyph-warning-sign'>\n                Warning\n            </Button>\n            <Button bsStyle={Button.DANGER} variant={Button.VARIANT_OUTLINE} iconName='rioglyph-error-sign'>\n                Danger\n            </Button>\n            <Button bsStyle={Button.MUTED_FILLED} variant={Button.VARIANT_OUTLINE} iconName='rioglyph-cog'>\n                Muted filled\n            </Button>\n            <Button bsStyle={Button.MUTED} variant={Button.VARIANT_OUTLINE} iconName='rioglyph-heart'>\n                Muted\n            </Button>\n        </ButtonToolbar>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Outlined buttons (transparent)</div>\n    <div class=\"btn-toolbar\">\n        <button type=\"button\" class=\"btn btn-default btn-outline btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-truck\">\n            </span>Default</button>\n        <button type=\"button\" class=\"btn btn-primary btn-outline btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-heart\">\n            </span>Primary</button>\n        <button type=\"button\" class=\"btn btn-success btn-outline btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-thumbs-up\">\n            </span>Success</button>\n        <button type=\"button\" class=\"btn btn-info btn-outline btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-info-sign\">\n            </span>Info</button>\n        <button type=\"button\" class=\"btn btn-warning btn-outline btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-warning-sign\">\n            </span>Warning</button>\n        <button type=\"button\" class=\"btn btn-danger btn-outline btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-error-sign\">\n            </span>Danger</button>\n        <button type=\"button\" class=\"btn btn-muted-filled btn-outline btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-cog\">\n            </span>Muted filled</button>\n        <button type=\"button\" class=\"btn btn-muted btn-outline btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-heart\">\n            </span>Muted</button>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set the button disabled."
+                    },
+                    {
+                      "name": "active",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set the button toggled. Should be used in combination with \"asToggle\" prop."
+                    },
+                    {
+                      "name": "asToggle",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Use the button as a toggle button. The toggle state can be controlled viw the \"active\" prop."
+                    },
+                    {
+                      "name": "iconOnly",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Use when the content of the button is an icon only to adapt the button spacing accordingly."
+                    },
+                    {
+                      "name": "iconName",
+                      "type": "String",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "iconRight",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side."
+                    },
+                    {
+                      "name": "multiline",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only."
+                    },
+                    {
+                      "name": "block",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the button takes up the full width of the parent element."
+                    },
+                    {
+                      "name": "onClick",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function triggered when clicking the button."
+                    },
+                    {
+                      "name": "bsStyle",
+                      "type": "String",
+                      "default": "default",
+                      "description": "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"
+                    },
+                    {
+                      "name": "bsSize",
+                      "type": "String",
+                      "default": "",
+                      "description": "Sets the button size. Possible values are: xs, sm, md and lg or Button.XS, Button.SM, Button.MD and Button.LG"
+                    },
+                    {
+                      "name": "variant",
+                      "type": "String",
+                      "default": "",
+                      "description": "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"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the button element."
+                    },
+                    {
+                      "name": "children",
+                      "type": "any",
+                      "default": "",
+                      "description": "Any element to be rendered on the button."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Action buttons",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Button from '@rio-cloud/rio-uikit/Button';\nimport ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\n\nexport default () => (\n    <div>\n        <FormLabel>Action buttons</FormLabel>\n        <ButtonToolbar className='align-items-start'>\n            <Button\n                bsStyle={Button.PRIMARY}\n                variant={Button.VARIANT_ACTION}\n                iconName='rioglyph-truck'\n                className='text-size-h1'\n            >\n                Click me!\n            </Button>\n            <Button\n                bsStyle={Button.SUCCESS}\n                variant={Button.VARIANT_ACTION}\n                iconName='rioglyph-thumbs-up'\n                className='text-size-h2'\n            >\n                Click me!\n            </Button>\n            <Button\n                bsStyle={Button.INFO}\n                variant={Button.VARIANT_ACTION}\n                iconName='rioglyph-info-sign'\n                className='text-size-h3'\n            >\n                Click me!\n            </Button>\n            <Button\n                bsStyle={Button.WARNING}\n                variant={Button.VARIANT_ACTION}\n                iconName='rioglyph-warning-sign'\n                className='text-size-20'\n            >\n                Click me!\n            </Button>\n            <Button\n                bsStyle={Button.DANGER}\n                variant={Button.VARIANT_ACTION}\n                iconName='rioglyph-error-sign'\n                className='text-size-16'\n            >\n                Click me!\n            </Button>\n            <Button\n                bsStyle={Button.MUTED}\n                variant={Button.VARIANT_ACTION}\n                iconName='rioglyph-cog'\n                className='text-size-14'\n            >\n                Click me!\n            </Button>\n        </ButtonToolbar>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Action buttons</div>\n    <div class=\"align-items-start btn-toolbar\">\n        <button type=\"button\" class=\"btn btn-primary btn-action btn-component text-size-h1\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-truck\">\n            </span>Click me!</button>\n        <button type=\"button\" class=\"btn btn-success btn-action btn-component text-size-h2\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-thumbs-up\">\n            </span>Click me!</button>\n        <button type=\"button\" class=\"btn btn-info btn-action btn-component text-size-h3\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-info-sign\">\n            </span>Click me!</button>\n        <button type=\"button\" class=\"btn btn-warning btn-action btn-component text-size-20\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-warning-sign\">\n            </span>Click me!</button>\n        <button type=\"button\" class=\"btn btn-danger btn-action btn-component text-size-16\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-error-sign\">\n            </span>Click me!</button>\n        <button type=\"button\" class=\"btn btn-muted btn-action btn-component text-size-14\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-cog\">\n            </span>Click me!</button>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set the button disabled."
+                    },
+                    {
+                      "name": "active",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set the button toggled. Should be used in combination with \"asToggle\" prop."
+                    },
+                    {
+                      "name": "asToggle",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Use the button as a toggle button. The toggle state can be controlled viw the \"active\" prop."
+                    },
+                    {
+                      "name": "iconOnly",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Use when the content of the button is an icon only to adapt the button spacing accordingly."
+                    },
+                    {
+                      "name": "iconName",
+                      "type": "String",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "iconRight",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side."
+                    },
+                    {
+                      "name": "multiline",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only."
+                    },
+                    {
+                      "name": "block",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the button takes up the full width of the parent element."
+                    },
+                    {
+                      "name": "onClick",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function triggered when clicking the button."
+                    },
+                    {
+                      "name": "bsStyle",
+                      "type": "String",
+                      "default": "default",
+                      "description": "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"
+                    },
+                    {
+                      "name": "bsSize",
+                      "type": "String",
+                      "default": "",
+                      "description": "Sets the button size. Possible values are: xs, sm, md and lg or Button.XS, Button.SM, Button.MD and Button.LG"
+                    },
+                    {
+                      "name": "variant",
+                      "type": "String",
+                      "default": "",
+                      "description": "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"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the button element."
+                    },
+                    {
+                      "name": "children",
+                      "type": "any",
+                      "default": "",
+                      "description": "Any element to be rendered on the button."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}